@graphql-codegen/client-preset-swc-plugin adds imports before "use client"

[victorandree]

Which packages are impacted by your issue?

@graphql-codegen/cli, @graphql-codegen/client-preset

Describe the bug

@graphql-codegen/client-preset-swc-plugin inserts imports at the top of modules where you define queries. This breaks modules that are defined as React client components using the "use client" directive, which must appear at the top of the file - because the inserted imports end up before the directive.

This means you cannot define GraphQL queries in the same module as a client component when using the Next.js app directory.

Please see the example repository for a reproduction.

Your Example Website or App

https://github.com/victorandree/graphql-code-generator-swc-app-dir

Steps to Reproduce the Bug or Issue

1. Create a client component in a Next.js app using the "app routes", requiring the use of a "use client" directive at the top of the module.
2. Define a GraphQL query in this module.
3. Set up GraphQL code generator with the "client preset" and using the SWC plugin.
4. Try to build the Next.js app

The build will fail with a message like the following:

$ npm run dev

[...]
- error ./app/QueryComponent.tsx
ReactServerComponentsError:

The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

   ,-[/graphql-code-generator-swc-app-dir/app/QueryComponent.tsx:1:1]
 1 | 'use client';
   : ^^^^^^^^^^^^^
 2 |
 3 | import { useQuery } from '@apollo/client';
 4 | import { graphql } from '../gql';
   `----

Import path:
  ./app/QueryComponent.tsx
  ./app/page.tsx

Expected behavior

Since "use client" is required to be at the top of the file by the React Server Components RFC, I expect the SWC plugin to insert its imports after this directive.

Expressed differently: I expect to be able to define GraphQL queries in client components.

Screenshots or Videos

No response

Platform

• OS: macOS
• NodeJS: 16.19.1
• graphql version: 16.6.0
• @graphql-codegen/cli: 3.3.1
• @graphql-codegen/client-preset: 3.0.1
• @graphql-codegen/client-preset-swc-plugin: 0.2.0

Codegen Config File

import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: 'schema.graphql',
  documents: 'app/**/*.tsx',
  generates: {
    'gql/': {
      preset: 'client',
      plugins: [],
    },
  },
};

export default config;

Additional context

A workaround is to define queries in a separate file, and import them in the client component. This is a bit annoying.

I'm not super-experienced in reading Rust, but I'm pretty sure that the imports are inserted by the plugin by module.body.insert(0, [...]) in lib.rs:183. I'm not sure if there's a simple way to insert it "a bit later" if there's a "use client" directive there.

Note: The SWC plugin crashes with the latest version of Next (13.4.3).

[BowlingX]

I tried it out with using 1 as index and it works - There might be edge cases though

[victorandree]

@BowlingX By "1 as index", do you mean passing a 1 as the first argument to module.body.insert, instead of 0?

Yeah, that should probably insert the import statement after the first ModuleItem. However, the first ModuleItem may not be a "use client" directive, so it's probably better to only apply this logic conditionally.

The code should probably check module.body, to find the index where the import declaration should be inserted. It should be possible to identify "use client" directives, or other module items, that should be placed before an import, and then insert imports after that index.