I'm using Apollo Client with React, graphql-tag loaded with Webpack, and graphql-config to maintain the schema on the client.
There is a file ./myclient/src/features/stats/graphql/getStart.graphql
query GetStart {
start @client
}
where start
and @client
don't validate with the IDE graphql plugin because they are not included in the auto generated schema.
The ./myclient/.graphqlconfig
file
{
"projects": {
"client": {
"schemaPath": "schema.graphql",
"extensions": {
"endpoints": {
"dev": "http://localhost:3000/graphql"
}
}
}
}
}
Webpack is configured to load the graphql schema on the client with
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
use: 'graphql-tag/loader',
},
It will load the server schema correctly. But, how do I configure it to validate or ignore the start @client
which is causing Unknown field "start" on object "Query"
and Unknown directive "@client"
errors?
It is possible to define client side schema for Apollo client, the docs. I created a file ./src/apollo/graphql/typeDefs.graphql
that contained the type definitions.
directive @client on FIELD
type RestParams {
limit: Int
page: Int
}
extend type Query {
restParams: RestParams
}
I imported the typeDefs.graphql
into the client.js
file and added typeDefs
to the ApolloClient
constructor options.
import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { InMemoryCache } from 'apollo-cache-inmemory';
import TYPE_DEFS from './graphql/typeDefs.graphql';
import createHttpLink from './links/httpLink';
import createErrorLink from './links/errorLink';
import createAuthLink from './links/authLink';
const errorLink = createErrorLink();
const httpLink = createHttpLink();
const authLink = createAuthLink();
const cache = new InMemoryCache({});
const client = new ApolloClient({
cache,
link: ApolloLink.from([
authLink,
errorLink,
httpLink,
]),
// resolves,
typeDefs: TYPE_DEFS,
connectToDevTools: true,
});
export default client;
Not are the type definitions discoverable by the IDE but they also are discoverable by the Apollo Chrome inspector plugin.