Search code examples
reactjsgraphqlapollo

Validate React GraphQL Tags against server schema

I want validate graphql tags on our react client against the schema produced on our graphql server. This validation would run as part of our test setup, and warn us if there are breaking changes in the graphql schema defintion.

So far I have extrated the schema.json from the server using apollo schema:download --endpoint=http...

Now I would like to test the following mutation: 

import gql from 'graphql-tag';

const LOGIN_MUTATION = gql`
    mutation LoginMutation($email: String!, $password: String!) {
        login(email: $email, password: $password) {
            id
            accessToken
            refreshToken
            expires
        }
    }
`;

with a test like this: 

import { GraphQLSchema } from 'graphql';
import { validate } from 'graphql/validation';
import * as schemaJson from '../../../../../backend/schema.json';
const schema = new GraphQLSchema(schemaJson as any);
import { LOGIN_MUTATION } from './Auth';

test("validate login mutation", assert => {
    const errors = validate(schema, LOGIN_MUTATION);
    const isValid = !errors.length;
    expect(isValid).toBe(true);
});

This gives me the error: Query root type must be provided

How can I valdiate the graphql tag against a given json schema?

Solution

  • You don't need write unit test for checking graphql tag against a given json schema.

    During development you can use WebStorm IDE plugin or similar tool or Visual Studio Code plugin. It will look like that: enter image description here

    During CI/CD before building you can use GraphQL eslint plugin as part of checking your codestyle.