graphiql icon indicating copy to clipboard operation
graphiql copied to clipboard

How to use with multiple different graphql apis in same file (pluckConfig?)

Open ghry5 opened this issue 5 years ago • 3 comments

I am using multiple different graphql APIs which I have registered in my graphql-config file as different named projects. Using external *.projectX.gql files works quite nicely.

{
  "projects": {
    "p1": {
      "schema": "p1.graphql",
      "documents": ["src/**/*.p1.gql"]
    },
    "hasura": {
      "schema": "p2.graphql",
      "documents": ["src/**/*.p2.gql"]
    }
  }
}

Is there any way to use the gql tag inside jsx/tsx by specifying a specific project?

Something like:

import {gql as gqlP1} from  'graphql-tag';
import {gql as gqlP2} from  'graphql-tag';

const queryProject1 = gqlP1`...`
const queryProject2 = gqlP2`...`

ghry5 avatar Oct 14 '20 20:10 ghry5

I have attempted to use graphql-configs pluckConfig to use 'gql' for my first project (hasura) and 'graphql' for gatsby. The config works for graphql-codegen ('graphql' tags are being ignored successfully)

projects:
  default:
    schema: 'http://localhost:6060/v1/graphql'
    documents:
      - src/**/*.{graphql,gql,ts,tsx}:
          pluckConfig:
            globalGqlIdentifierName: 'gql'
            modules:
              - name: '@apollo/client'
                identifier: 'gql'
    extensions:
      codegen:
        overwrite: true
        generates:
          src/generated/graphql.tsx:
            plugins:
              - 'typescript'
              - 'typescript-operations'
              - 'typescript-react-apollo'
          ./graphql.schema.json:
            plugins:
              - 'introspection'
  gatsby:
    schema: 'http://localhost:8000/___graphql'
    documents:
      - src/**/*.{ts,tsx}:
          pluckConfig:
            globalIdentifier: 'graphql'
            globalGqlIdentifierName: 'graphql'
            modules:
              - name: 'gatsby'
                identifier: 'graphql'

Sadly vscode still reports my gatsby queries which use import {graphql} from 'gatsby' as an error. Inside said tags i get autocompletion for my default (hasura) api.

ghry5 avatar Oct 14 '20 22:10 ghry5

I had no idea about pluckConfig. Unfortunately it takes a lot more than just upgrading graphql config

acao avatar Nov 13 '22 09:11 acao

@acao What does it take?


There's no way there's an assumption that there is only ever one GraphQL schema in all of existence.....

Lots of APIs, lots of GraphQL schemas.

pauldraper avatar Aug 02 '25 12:08 pauldraper