Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GraphQL queries and mutations etc. with GraphiQL samples

GraphQL queries, mutations etc.

Some GraphQl "queries" and "mutations" who can be copy/paste into GraphiQL if you have a Learn Apollo account. A hands-on tutorial for Apollo GraphQL Client, with React, React Native or Angular.

If you do not want to create a "Learn Apollo" account, i by the way can much recommend.

Docs for Queries and Mutations or GraphQL

You can try:

Star Wars API and at GitHub a GraphQL schema and server wrapping SWAPI

or

GraphQLHub: Query popular APIs using GraphQL in your browser

GraphCool Pokemon API

Query

query{
  allPokemons {
    name
    id
    trainer {
      name
      id
    }
  }
}

Result

 "data": {
    "allPokemons": [
      {
        "name": "Mewtwo",
        "id": "cj1z39qib3pgv0179nyfe4esf",
        "trainer": {
          "name": "Michael Macherey",
          "id": "cj1z39qhd9dra0178nqpxbr9x"
        }
      },
      {
        "name": "Pikachu",
        "id": "cj1z39qjv9dsq0178ur7m23a9",
        "trainer": {
          "name": "Michael Macherey",
          "id": "cj1z39qhd9dra0178nqpxbr9x"
        }
      }
    ]
  }
}

Delete a Pokemon with "mutation" ID.

mutation {
  deletePokemon(id: "cj2j4u33aeoqn01414u1kjggg"){
  name
  }
}

Response of deletion.

{
  "data": {
    "deletePokemon": {
      "name": "as"
    }
  }
}

But this try of a mutation failed.

{
  deletePokemon(id: "cj22jlmoa8w260157q7dl6zbq"){
  name
  }
}

Seems like "query" is set as default

 "data": null,
  "errors": [
    {
      "message": "Cannot query field 'deletePokemon' on type 'Query'. Did you mean 'allPokemons' or 'Pokemon'? (line 2, column 3):\n  deletePokemon(id: \"cj22jlmoa8w260157q7dl6zbq\"){\n  ^",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ]
    }
  ]
}

Show Pokemons of trainer Michael do

    query{
      allPokemons(orderBy: createdAt_ASC) {
        name
        id
        trainer(filter: {id: "cj1z39qhd9dra0178nqpxbr9x", name: "Michael Macherey"}){
          name
        }
      }
    }

not work as expected! have a look at 'trainer: "null"'

{
  "data": {
    "allPokemons": [
      {
        "name": "Mewtwo",
        "id": "cj1z39qib3pgv0179nyfe4esf",
        "trainer": {
          "name": "Michael Macherey"
        }
      },
      {
        "name": "Pikachu",
        "id": "cj1z39qjv9dsq0178ur7m23a9",
        "trainer": {
          "name": "Michael Macherey"
        }
      },
      {
        "name": "Bulbasaur",
        "id": "cj1z39qlk3phv01793xgzqmcc",
        "trainer": {
          "name": "Michael Macherey"
        }
      },
      {
        "name": "assdsd",
        "id": "cj22gma1aa0d90116wh0iqx88",
        "trainer": null
      },
      {
        "name": "sa",
        "id": "cj22gov2gdk7l011229066zwz",
        "trainer": null
      },
      {
        "name": "sa",
        "id": "cj22gowgpc3ce0116rbutb7w6",
        "trainer": null
      },
      {
        "name": "Anja",
        "id": "cj2j4ey8uwogc0141aphp6rku",
        "trainer": {
          "name": "Michael Macherey"
        }
      },
      {
        "name": "EWQ",
        "id": "cj2j4z43339am0142al79sia0",
        "trainer": {
          "name": "Michael Macherey"
        }
      }
    ]
  }
}

But this query finaly works as expected!

query{
  allPokemons(filter: {trainer: {name: "Michael Macherey"}},orderBy: createdAt_ASC) {
    name
    id
    trainer{
      name
      id
    }
  }
}

Samples with Star Wars API

Explaining GraphQL Connections by Caleb Meredith

This query is nice for exploring the API in GraphiQL but maybe not for production use!

query{
  allPlanets(first: 2){
    planets{
      id
      name
      population
      climates
      terrains
    }
  }
}

Result

{
  "data": {
    "allPlanets": {
      "planets": [
        {
          "id": "cGxhbmV0czox",
          "name": "Tatooine",
          "population": 200000,
          "climates": [
            "arid"
          ],
          "terrains": [
            "desert"
          ]
        },
        {
          "id": "cGxhbmV0czoy",
          "name": "Alderaan",
          "population": 2000000000,
          "climates": [
            "temperate"
          ],
          "terrains": [
            "grasslands",
            "mountains"
          ]
        }
      ]
    }
  }
}

The same query but with using edges, nodes and adding a cursor recommended for production.

Have a look at the benefit of this with Pagination

query{
  allPlanets(first: 2){
    edges{
      cursor
      node{
        id
        name
        population
        climates
        terrains
      }
    }
  }
}

Result showing edges, nodes and cursor

{
  "data": {
    "allPlanets": {
      "edges": [
        {
          "cursor": "YXJyYXljb25uZWN0aW9uOjA=",
          "node": {
            "id": "cGxhbmV0czox",
            "name": "Tatooine",
            "population": 200000,
            "climates": [
              "arid"
            ],
            "terrains": [
              "desert"
            ]
          }
        },
        {
          "cursor": "YXJyYXljb25uZWN0aW9uOjE=",
          "node": {
            "id": "cGxhbmV0czoy",
            "name": "Alderaan",
            "population": 2000000000,
            "climates": [
              "temperate"
            ],
            "terrains": [
              "grasslands",
              "mountains"
            ]
          }
        }
      ]
    }
  }
}

GraphQLHub query the Hacker News API

Inline Fragments

hn2: HackerNewsAPIV2

{
  hn2 {
    nodeFromHnId(id:"clayallsopp", isUserId:true) {
      id
      ... on HackerNewsV2User {
        submitted(first: 5) {
          pageInfo {
            hasNextPage
            endCursor
          }
          edges {
            cursor
            node {
              id
              ... on HackerNewsV2Story {
								score
                url
              }
              ... on HackerNewsV2Comment {
                text
              }
            }
          }
        }
      }
    }
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment