GraphQL queries and mutations etc. with GraphiQL samples

graphql-queries-and-mutations.md

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
              }
            }
          }
        }
      }
    }
  }
}