GraphQL Playground

Try it

Response

Types in the schema

Object types and their fields, read from the schema text above.

Send the query to your own endpoint

The query and variables above are sent as a POST with a JSON body. The endpoint must answer, and must allow requests from this page (CORS). The mock server allows tinypdf.in by default.

How mutations work

A mutation is a field on the Mutation type. Unlike a query, it changes the data, and the fields run one after another in the order you write them. The playground and the mock use the same rules.

What each handler does

Add your own mutation

1. Add a Mutation type to the schema. Each field takes scalar arguments such as String, Int or ID:

   type Mutation {
     addUser(name: String!, email: String): User
     renameUser(id: ID!, name: String!): User
   }

2. Name the list each field changes. Add a handler under mutations in mock.json, using the list name from your data:

   "mutations": {
     "addUser": { "insert": "users", "defaults": { "orders": [] } },
     "renameUser": { "update": "users", "by": "id" }
   }

3. Restart the mock. It reads the schema and handlers only when it starts.
4. Check the result. Send the mutation, then a query that reads the list. The next section shows the expected output.

What you should see

curl -s -X POST http://localhost:4747/graphql -H 'content-type: application/json' \
  -d '{"query":"mutation { addUser(name: \"Meera\") { id name orders { id } } }"}'
{"data":{"addUser":{"id":"new3","name":"Meera","orders":[]}}}

curl -s -X POST http://localhost:4747/graphql -H 'content-type: application/json' \
  -d '{"query":"{ users { id name } }"}'
{"data":{"users":[{"id":"u1","name":"Asha"},{"id":"u2","name":"Ravi"},{"id":"new3","name":"Meera"}]}}

The new id depends on how many items the list has, so yours may differ. If a mutation has no handler, its field returns null with the error No handler for mutation, and nothing is changed.

Limits

• Changes are kept in memory. They last until the mock stops, and they never change data.json.
• Only top-level lists change. A copy of an order inside a user is not updated when the order in the orders list changes.
• Arguments are scalars. Input types and list arguments are not supported.
• Send mutations with POST. A GET is refused with status 405.

Try it against tinypdf-mock on your computer

The examples above can also run against a real server on your machine. You need Node.js 18 or newer. These steps set up the sample shop from this page, then send it queries from a terminal and from this page.

1. Save the sample files. These buttons save the schema and data from the editors above. Change them first if you want your own shop.
   Download schema.graphqlDownload data.json
2. Create a routes file. Put the two files in one folder, and save this as mock.json in the same folder:

   {
     "graphql": {
       "path": "/graphql",
       "schemaFile": "schema.graphql",
       "dataFile": "data.json",
       "mutations": {
         "addUser": { "insert": "users", "defaults": { "orders": [] } },
         "renameUser": { "update": "users", "by": "id" },
         "deleteUser": { "delete": "users", "by": "id" },
         "setOrderStatus": { "update": "orders", "by": "id" }
       }
     }
   }

3. Start the mock. In that folder, run:

   npx tinypdf-mock@0.3.0 mock.json

   It listens on http://localhost:4747 and prints the GraphQL address. Leave it running.
4. Send a query from a terminal.

   curl -s -X POST http://localhost:4747/graphql \
     -H 'content-type: application/json' \
     -d '{"query":"{ users { id name } }"}'

   You should get the two users back. Next, try the Partial data example: send { products { sku title price } }. The response is still 200, the Mini plan's price is null, and the error explains why.
5. See a validation error. Send { users { nickname } }. The status is 400 and there is no data, because the query failed validation before it ran. Then try a variable:

   curl -s -X POST http://localhost:4747/graphql \
     -H 'content-type: application/json' \
     -d '{"query":"query Find($id: ID!) { user(id: $id) { name } }","variables":{"id":"u2"}}'

6. Send from this page. In the section "Send the query to your own endpoint" above, keep the address http://localhost:4747/graphql and press Send. The mock allows requests from tinypdf.in by default, so the browser can reach it.
7. Make it fail on purpose. Stop the mock, then start it again with a fault:

   npx tinypdf-mock@0.3.0 mock.json --fault fail-first-n:n=2,status=503

   The first two requests get a 503, and later ones succeed. Faults apply to /graphql too, so you can check how your client handles a failed GraphQL call.
8. Change data with a mutation. Mutations are sent with POST. This adds a user, and a query then returns her:

   curl -s -X POST http://localhost:4747/graphql \\
     -H 'content-type: application/json' \\
     -d '{"query":"mutation { addUser(name: \\"Meera\\") { id name } }"}'
   curl -s -X POST http://localhost:4747/graphql \\
     -H 'content-type: application/json' \\
     -d '{"query":"{ users { id name } }"}'

   Changes are kept in memory. They last until you stop the mock, and they do not change data.json.
9. Change the sample. Edit schema.graphql or data.json, then restart the mock. It reads these files only when it starts.