intellij-ideagraphqlapollo-clientgraphql-tag

Graphql-config does not recognize Apollo Graphql @client directive


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?


Solution

  • 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.