Support queries for multiple schemas in the same file

packages/graphql-language-service-server/README.md

@@ -29,6 +29,7 @@ Supported features include:
 - Support for `gql` `graphql` and other template tags inside javascript,
   typescript, jsx, ts, vue and svelte files, and an interface to allow custom
   parsing of all files.
+- Support multiple GraphQL APIs in the same file via annotation suffixes.
 
 ## Installation and Usage
 
@@ -187,6 +188,9 @@ export default {
         languageService: {
           cacheSchemaFileForLookup: true,
           enableValidation: false,
+          gqlTagOptions: {
+            annotationSuffix: 'my-project',
+          },
         },
       },
     },
@@ -237,18 +241,37 @@ via `initializationOptions` in nvim.coc. The options are mostly designed to
 configure graphql-config's load parameters, the only thing we can't configure
 with graphql config. The final option can be set in `graphql-config` as well
 
-| Parameter                                 | Default                         | Description                                                                                                                                                       |
-| ----------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `graphql-config.load.baseDir`             | workspace root or process.cwd() | the path where graphql config looks for config files                                                                                                              |
-| `graphql-config.load.filePath`            | `null`                          | exact filepath of the config file.                                                                                                                                |
-| `graphql-config.load.configName`          | `graphql`                       | config name prefix instead of `graphql`                                                                                                                           |
-| `graphql-config.load.legacy`              | `true`                          | backwards compatibility with `graphql-config@2`                                                                                                                   |
-| `graphql-config.dotEnvPath`               | `null`                          | backwards compatibility with `graphql-config@2`                                                                                                                   |
-| `vscode-graphql.cacheSchemaFileForLookup` | `false`                         | generate an SDL file based on your graphql-config schema configuration for schema definition lookup and other features. useful when your `schema` config are urls |
+| Parameter                                       | Default                         | Description                                                                                                                                                                                                                   |
+| ----------------------------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `graphql-config.load.baseDir`                   | workspace root or process.cwd() | the path where graphql config looks for config files                                                                                                                                                                          |
+| `graphql-config.load.filePath`                  | `null`                          | exact filepath of the config file.                                                                                                                                                                                            |
+| `graphql-config.load.configName`                | `graphql`                       | config name prefix instead of `graphql`                                                                                                                                                                                       |
+| `graphql-config.load.legacy`                    | `true`                          | backwards compatibility with `graphql-config@2`                                                                                                                                                                               |
+| `graphql-config.dotEnvPath`                     | `null`                          | backwards compatibility with `graphql-config@2`                                                                                                                                                                               |
+| `vscode-graphql.cacheSchemaFileForLookup`       | `false`                         | generate an SDL file based on your graphql-config schema configuration for schema definition lookup and other features. useful when your `schema` config are urls                                                             |
+| `vscode-graphql.gqlTagOptions.annotationSuffix` | `null`                          | establish a suffix to match queries to a project schema using `#graphql:<suffix>` comment. Only the first matching project for a given query is used, thus supporting multiple queries for different schemas in the same file |
 
 all the `graphql-config.load.*` configuration values come from static
 `loadConfig()` options in graphql config.
 
+Use the `gqlTagOptions.annotationSuffix` option to mix queries for different schemas in the same file. Each query annotated with the `#graphql:<suffix>` comment will be matched to the first project with the same suffix:
+
+```ts
+// file.js
+
+const queryForDefaultProject = `#graphql
+  query { something }
+`;
+
+const queryForDbProject = `#graphql:db
+  query { something }
+`;
+
+const queryForCmsProject = `#graphql:cms
+  query { something }
+`;
+```
+
 (more coming soon!)
 
 ### Architectural Overview

packages/graphql-language-service-server/src/GraphQLCache.ts

@@ -48,8 +48,13 @@ import { LoadConfigOptions } from './types';
 import { URI } from 'vscode-uri';
 import { CodeFileLoader } from '@graphql-tools/code-file-loader';
 import { EXTENSION_NAME } from './GraphQLLanguageService';
+import {
+  DEFAULT_SUPPORTED_EXTENSIONS,
+  DEFAULT_SUPPORTED_GRAPHQL_EXTENSIONS,
+} from './constants';
+import { NoopLogger, Logger } from './Logger';
 
-export const LanguageServiceExtension: GraphQLExtensionDeclaration = api => {
+const LanguageServiceExtension: GraphQLExtensionDeclaration = api => {
   // For schema
   api.loaders.schema.register(new CodeFileLoader());
   // For documents

packages/graphql-language-service-server/src/findGraphQLTags.ts

@@ -128,7 +128,9 @@ export function findGraphQLTags(
       }
     },
     TemplateLiteral(node: TemplateLiteral) {
+      // check if the template literal is prefixed with #graphql
       const hasGraphQLPrefix = node.quasis[0].value.raw.startsWith('#graphql');
+      // check if the template expression has
       const hasGraphQLComment = Boolean(
         node.leadingComments?.[0]?.value.match(/^\s*GraphQL\s*$/),
       );

packages/vscode-graphql/README.md

@@ -128,6 +128,11 @@ module.exports = {
             },
           },
         ],
+        languageService: {
+          gqlTagOptions: {
+            annotationSuffix: 'db',
+          },
+        },
       },
     },
   },
@@ -137,6 +142,24 @@ module.exports = {
 Notice that `documents` key supports glob pattern and hence `["**/*.graphql"]`
 is also valid.
 
+Normally, you want to point your `documents` to different files per project to ensure only one schema is used for the queries. However, you can also mix queries for different schemas in the same file by adding a `#graphql:<suffix>` comment to the query that matches the `languageService.gqlTagOptions.annotationSuffix` for the project:
+
+```ts
+// file.js
+
+const queryForDefaultProject = `#graphql
+  query { something }
+`;
+
+const queryForDbProject = `#graphql:db
+  query { something }
+`;
+
+const queryForCmsProject = `#graphql:cms
+  query { something }
+`;
+```
+
 ## Frequently Asked Questions
 
 <span id="legacy" />
@@ -300,14 +323,14 @@ further!
 This plugin uses the
 [GraphQL language server](https://github.com/graphql/graphql-language-service-server)
 
-1.  Clone the repository - https://github.com/graphql/graphiql
-1.  `yarn`
-1.  Run "VScode Extension" launcher in vscode
-1.  This will open another VSCode instance with extension enabled
-1.  Open a project with a graphql config file - ":electric_plug: graphql" in
-    VSCode status bar indicates that the extension is in use
-1.  Logs for GraphQL language service will appear in output section under
-    GraphQL Language Service
+1. Clone the repository - <https://github.com/graphql/graphiql>
+1. `yarn`
+1. Run "VScode Extension" launcher in vscode
+1. This will open another VSCode instance with extension enabled
+1. Open a project with a graphql config file - ":electric_plug: graphql" in
+   VSCode status bar indicates that the extension is in use
+1. Logs for GraphQL language service will appear in output section under
+   GraphQL Language Service
 
 ### Contributing back to this project