When specifying the generated document when submitting a query with urql in rsc, an error occurs: createContext only works in client components. occurs

[shunkominato]

Hi thank you for the great library

I'm having a strange problem and would like to consult with you.

Sorry if there is a similar issue or discussion.

If you still need to file an issue, I will create one.

problem

When using documentation generated by the GraphQL Code Generator when issuing a query using urql in rsc under the app router, I get an error: createContext only works in client components. To use this, add the "use client" directive at the top of the file to use it.` occurs.

Strangely, it works fine when I use the documentation written directly in the component instead of the generated documentation.

The generated content seems fine.
Of course, I am not using automatically generated hooks because of rsc.

The generated documentation is here

The repository and relevant parts are here.

I would like to use the generated document, but is there any way to do so?

version

  "@urql/core": "^4.1.4",
  "@urql/next": "^1.1.0",
  "graphql": "^16.8.1",
  "next": "14.0.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "urql": "^4.0.5",
  "zod": "^3.22.4"

  "@graphql-codegen/cli": "^5.0.0",
  "@graphql-codegen/fragment-matcher": "^5.0.0",
  "@graphql-codegen/introspection": "^4.0.0",
  "@graphql-codegen/typescript": "^4.0.1",
  "@graphql-codegen/typescript-operations": "^4.0.1",
  "@graphql-codegen/typescript-urql": "^4.0.0",
  "@graphql-codegen/urql-introspection": "^3.0.0",
  "typescript": "5.2.2"

codegen.yml

overwrite: true
schema: 'http://localhost:81/query'
documents:
  - 'src/**/*.query.graphql'
  - 'src/**/*.fragment.graphql'
generates:
  src/generated/graphql.ts:
    plugins:
      - typescript
      - fragment-matcher
      - typescript-operations
      - typescript-urql
    config:
      withComponent: false
      withHooks: true
      withHOC: false
  ./graphql.schema.json:
    plugins:
      - urql-introspection