# Vs code extension not working with graphql code gen

**URL:** <https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628>\
**Category:** Other Apollo Topics\
**Tags:** tooling\
**Created:** [February 3, 2023, 2:11pm UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628 "2023-02-03T14:11:31Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![SonMooSans](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/sonmoosans/32/3819_2.png) [@SonMooSans](https://community.apollographql.com/u/SonMooSans)\
**Post date:** [February 3, 2023, 2:11pm UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628/1 "2023-02-03T14:11:31Z")

</div>

I am following [this guide](https://www.apollographql.com/docs/react/development-testing/static-typing) to configuration type-safe Apollo GraphQL on my react app

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

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

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

```

If I use the default function, it works

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

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

```

 ![index.tsx](https://us1.discourse-cdn.com/flex019/uploads/apollographql/original/2X/a/aee50022e4aa019ce0698fecec29b5e74ece07b6.png)

Have I missed anything?

---

<div class="post-metadata">

**Author:** ![watson](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/watson/32/2053_2.png) [@watson](https://community.apollographql.com/u/watson)\
**Post date:** [February 13, 2023, 7:56pm UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628/2 "2023-02-13T19:56:04Z")

</div>

Hi @SonMooSans , do you have a GraphQL extension installed in VS Code? If you install the [Apollo extension](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo), it should show up like this:

![](https://us1.discourse-cdn.com/flex019/uploads/apollographql/original/2X/2/2a31830bba200cb4b0c73cde41f98fb3bed6aa36.gif)

---

<div class="post-metadata">

**Author:** ![juandopazo](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/juandopazo/32/4249_2.png) [@juandopazo](https://community.apollographql.com/u/juandopazo)\
**Post date:** [May 4, 2023, 12:15am UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628/3 "2023-05-04T00:15:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jbool24](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jbool24/32/4315_2.png) [@jbool24](https://community.apollographql.com/u/jbool24)\
**Post date:** [May 25, 2023, 8:37pm UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628/4 "2023-05-25T20:37:55Z")

</div>

This is not helpful. 🤨 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)](https://github.com/apollographql/apollo-tooling)

> **[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](https://github.com/apollographql/apollo-tooling/issues/2053)

---

<div class="post-metadata">

**Author:** ![Bryan\_D](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/bryan_d/32/4386_2.png) [@Bryan\_D](https://community.apollographql.com/u/Bryan_D)\
**Post date:** [June 24, 2023, 11:35pm UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628/7 "2023-06-24T23:35:23Z")

</div>

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

> <https://github.com/apollographql/vscode-graphql/pull/99>
>
> Turns out not too hard to fix. i added the parens in the regex.
> 
> Fixes https:/…/github.com/apollographql/vscode-graphql/issues/98.

---

<div class="post-metadata">

**Author:** ![Elvincth](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/elvincth/32/4718_2.png) [@Elvincth](https://community.apollographql.com/u/Elvincth)\
**Post date:** [November 7, 2023, 6:43pm UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628/8 "2023-11-07T18:43:49Z")

</div>

i fixed by adding the following to codegen.ts

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

```

and you can safely use with the extension support:

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

export const EXAMPLE_QUERY = gql`
...
`;

```

---

<div class="post-metadata">

**Author:** ![alessbell](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/alessbell/32/3381_2.png) [@alessbell](https://community.apollographql.com/u/alessbell)\
**Post date:** [November 9, 2023, 8:01pm UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628/10 "2023-11-09T20:01:41Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:48pm UTC](https://community.apollographql.com/t/vs-code-extension-not-working-with-graphql-code-gen/5628/11 "2025-02-06T20:48:03Z")

</div>

Archived on February 6, 2025, 8:48pm UTC