Custom graphql-config features

The graphql-config features we support are:

module.exports = {
  extensions: {
    // add customDirectives (legacy). you can now provide multiple schema pointers to config.schema/project.schema, including inline strings. same with scalars or any SDL type that you'd like to append to the schema
    customDirectives: ['@myExampleDirective'],
    // a function that returns an array of validation rules, ala https://github.com/graphql/graphql-js/tree/main/src/validation/rules
    // note that this file will be loaded by the vscode runtime, so the node version and other factors will come into play
    customValidationRules: require('./config/customValidationRules'),
    schemaCacheTTL: 1000, // reduce or increase minimum schema cache lifetime from 30000ms (30 seconds). you may want to reduce this if you are developing fullstack with network schema
    languageService: {
      // this is enabled by default if non-local files are specified in the project `schema`
      // NOTE: this will disable all definition lookup for local SDL files
      cacheSchemaFileForLookup: true,
      // undefined by default which has the same effect as `true`, set to `false` if you are already using // `graphql-eslint` or some other tool for validating graphql in your IDE. Must be explicitly `false` to disable this feature, not just "falsy"
      enableValidation: true,
      // (experimental) enhanced auto expansion of graphql leaf fields and arguments
      fillLeafsOnComplete: true,
      // instead of jumping directly to the SDL file, you can override definition peek/jump results to point to different files or locations
      // (for example, source files for your schema in any language!)
      // based on Relay vscode's pathToLocateCommand
      // see LocateCommand type!
      locateCommand(projectName, typePath, info) {
        // pass more info, such as GraphQLType with the ast node. info.project is also available if you need it
        const { path, range } = ourLookupUtility(
          projectName,
          typePath,
          info.type.node,
        );
        return { uri: path, range }; // range.start.line/range.end.character/etc, base 1
        // you can also return relay LSP style
        // return '/path/to/file.py:20:1'; // (range: 20:1 20:1 )
        // return '/path/to/file.py'; // (range: 1:1 1:1)
      },
    },
  },
};
Copy

or for multi-project workspaces:

// graphql.config.ts
export default {
  projects: {
    myProject: {
      schema: [
        // internally in `graphql-config`, an attempt will be made to combine these schemas into one in-memory schema to use for validation, lookup, etc
        'http://localhost:8080',
        './my-project/schema.graphql',
        './my-project/schema.ts',
        '@customDirective(arg: String!)',
        'scalar CustomScalar',
      ],
      // project specific defaults
      extensions: {
        languageService: {
          cacheSchemaFileForLookup: true,
          enableValidation: false,
        },
      },
    },
    anotherProject: {
      schema: {
        'http://localhost:8081': {
          customHeaders: { Authorization: 'Bearer example' },
        },
      },
    },
  },
  // global defaults for all projects
  extensions: {
    languageService: {
      cacheSchemaFileForLookup: false,
      enableValidation: true,
    },
  },
};
Copy

You can specify any of these settings globally as above, or per project. Read the graphql-config docs to learn more about this!

For secrets (headers, urls, etc), you can import dotenv() and set a base path as you wish in your graphql-config file to pre-load process.env variables.

Troubleshooting notes

• you may need to manually restart the language server for some of these configurations to take effect
• graphql-config's multi-project support is not related to multi-root workspaces in vscode - in fact, each workspace can have multiple graphql config projects, which is what makes multi-root workspaces tricky to support. coming soon!

./application

  ./productA
    .graphqlrc.yml
    ProductAQuery.graphql
    ProductASchema.graphql

  ./productB
    .graphqlrc.yml
    ProductBQuery.graphql
    ProductBSchema.graphql
Copy