graphql / graphiql

GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
MIT License
16.08k stars 1.72k forks source link

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

Open ghry5 opened 4 years ago

ghry5 commented 4 years ago

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 commented 4 years ago

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.

acao commented 1 year ago

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