Vs code extension not working with graphql code gen

Help
1

I am following this guide to configuration type-safe Apollo GraphQL on my react app

However, the code below won’t be detected as GraphQL in vscode

import { gql } from "../gql/generated/gql";

const GET_BOOK = gql(/* GraphQL */ `
    query getBook {
        book
    }
`);

If I use the default function, it works

import { gql } from "@apollo/client";

const GET_BOOK = gql`
    query getBook {
        book
    }
`;

index.tsx
index.tsx809×436 58.6 KB

Have I missed anything?

2

Hi @SonMooSans , do you have a GraphQL extension installed in VS Code? If you install the Apollo extension, it should show up like this:

3

Hi Watson, in your example you’re importing gql from “@apollo/client” and using it as a string template tag function. This works perfectly well.

The issue reported here is that if you follow the TypeScript example, the code generation for the schema generates a function that can’t be used as a tag. The guide in the Apollo docs suggests using the function as a function call with parenthesis. But this is not supported by the VSCode extension.

4

This is not helpful. :face_with_raised_eyebrow: What I believe the OP was requesting is to have both working side-by-side as they serve two separate functions. I suspect this is because your own docs say to stop using Apollo CLI for typescript generation. One allows development insight while coding Query/Mutations client-side such as auto-completion as well as profiling feedback inline in the doc (Apollo Extention), while the other provides the static typings (Graphql CodeGen) to be used in the Vue files or React files.

I also am looking for the best of both worlds so that I have auto-complete assistance while creating Query files separately from the Vue component. Then also having the types present in Vue files when using the request data as refs, computedRefs, etc etc. Can’t we get the best of both?

see GitHub - apollographql/apollo-tooling: ✏️ Apollo CLI for client tooling (Mostly replaced by Rover)

[2022-07-07] Are you here for codegen? We highly recommend using graphql-code-generator instead. Codegen in this repo is no longer supported and will be removed completely in a future version. For additional migration details, please see this fantastic writeup by @dotansimha: #2053

7

I was wrong. You can’t override its regex this way. This guy has a fix though:

8

i fixed by adding the following to codegen.ts

  pluckConfig: {
    modules: [
      {
        name: "@apollo/client",
        identifier: "gql",
      },
    ],
  },

and you can safely use with the extension support:

import { gql } from "@apollo/client";

export const EXAMPLE_QUERY = gql`
...
`;
10

For those who land here in the future, the fix in https://github.com/apollographql/vscode-graphql/pull/99 went out in the VSCode extension version 1.20.0: Releases · apollographql/vscode-graphql · GitHub

Make sure you’re running that version in the extensions tab of VSCode and you should be all set :slight_smile:

1 Like