Guide

You can use GraphQLPlaceholder with any type of project that needs to get JSON data (React, Vue, Node, Rails, Swift, Android, …).

Below are examples of Queries and Mutations. You can copy and paste them into the GraphQL Playground to quickly test GraphQLPlaceholder or you can use the Fetch API in your browser console.

Get a resource query

// POST => https://graphqlplaceholder.vercel.app/graphql

query {
  userById(id: 1) {
    id
    name
    email
    phone
  }
}

// Output
{
  userById: {
    id: 1,
    name: "[...]",
    email: "[...]",
    phone: "[...]"
  }
}

List all resources query

// POST => https://graphqlplaceholder.vercel.app/graphql

query {
  posts {
    id
    title
    body
  }
}

// Output
{
  posts: [
    { id: 1, title: '[...]' /* ... */ },
    /* ... */
    { id: 100, title: '[...]' /* ... */ }
  ]
}

Create a resource mutation

mutation {
  createPost(post: {
    title: "Lorem Ipsum",
    body: "Lorem Ipsum is simply dummy text.",
    userId: 1
  }) {
    id
    title
    body
  }
}

// Output
{
  createPost: {
    id: 101,
    title: "Lorem Ipsum",
    body: "Lorem Ipsum is simply dummy text."
  }
}

Important: The resource will not actually be created on the server; it will be simulated as if it were. In other words, if you try to access a post using 101 as an ID, you'll receive a 400 error.

Update a resource mutation

mutation {
  updatePost(postId: 1, post: {
    title: "Lorem Ipsum"
  }) {
    id
    title
    body
  }
}

// Output
{
  updatePost: {
    id: 1,
    title: "Lorem Ipsum",
    body: "[...]"
  }
}

Important: The resource will not actually be updated on the server; the update will be simulated.

Delete a resource mutation

mutation {
  deletePost(postId: 1)
}

// Output
{
  deletePost: "Post with ID 1 is successfully deleted."
}

Important: The resource will not actually be deleted on the server; the delete will be simulated.

Filter resources queries

Basic filtering is supported through query arguments.

// Will return all the posts that belong to the first user
query {
  posts(userId: 1) {
    id
    title
  }
}

// Will return the first 10 posts
query {
  posts(first: 10) {
    id
    title
  }
}

Nested resources queries

Multiple level of nested queries are available.

// Will return a user details, posts with associated comments, albums with associated photos, and todos
query {
  userById(id: 1) {
    name
    email
    phone
    posts {
      id
      title
      comments {
        id
        name
        body
      }
    }
    albums {
      id
      title
      photos {
        id
        url
        thumbnailUrl
      }
    }
    todos {
      id
      title
      completed
    }
  }
}

Refer to the schema for more nested graph resource