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?
Answer
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:
During CI/CD before building you can use GraphQL eslint plugin as part of checking your codestyle.
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?