About

This tool shows the relationship between nullability and error handling in GraphQL, with specific respect to Apollo Client.

Set the toggles to see how the request / response will change. Scroll to the bottom to see the result!

Questions / Suggestions? Reach out to me at @mark_larah!

Toggles

Error Policy

Toggle errorPolicy to see how the response objects change. See docs.

Nullability

Toggle if the Player.name field is nullable or not to see how the response objects change. See docs for errors and nullability.

Resolver Behaviour

Toggle if the resolver method should return an error or not.

Runtime Code

useQuery React Hook (Client)

The runtime code the React component will use to make the query. Note the difference in the errorPolicy attribute.
const GET_BEST_PLAYER = gql`
  query {
    soccerTeam(name: "Manchester United") {
      player(shirtNumber: 9) {
        name
      }
    }
  }
`;
function MyComponent() {
  const result = useQuery(GET_BEST_PLAYER);
  const { data, error, loading } = result;
  return loading ? null: JSON.stringify({ data, error });
}

Schema (Server)

This is the Schema Definiton Language (SDL) that the server will use when executing the request. Note the difference in nullability for Player.name.
type Player {
  name: String
  shirtNumber: Int
  position: String
}
type SoccerTeam {
  name: String
  player(shirtNumber: Int!): Player
}
type Query {
  soccerTeam(name: String!): SoccerTeam
}

Resolver (Server)

This is the resolver method that will be executed for Player.name.

Player: {
  name(obj, args, context, info) {
    return 'Anthony Martial';
  }
}

Result

Response

Shows the results for data and error (from MyComponent - see above). Click the network tab in developer tools to poke about some more.
{
  "loading": true
}
Made by Mark Larah (@mark_larah) • Built with @apollo/client@3.1.5