useQuery in Nextjs Client Component should be executed from the client side

urql-graphql / urql

The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.

https://urql.dev/goto/docs

MIT License

8.63k stars 451 forks source link

useQuery in Nextjs Client Component should be executed from the client side #3494

Closed khuongtp closed 8 months ago

khuongtp commented 8 months ago

Describe the bug

In the nextjs example, for client component, the useQuery should execute the request from client side

Reproduction

Go to this code sandbox, go to the non-rsc page, open dev tool and see there's no request called https://codesandbox.io/p/sandbox/github/urql-graphql/urql/tree/main/examples/with-next

Urql version

urql ^4.0.6 @urql/next ^1.1.1

Validations

[X] I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
[X] Read the docs.
[X] Follow our Code of Conduct

JoviDeCroock commented 8 months ago

That's sadly not how Next currently works when i.e. Suspense is enabled, and I would even say that this is desired/expected behavior, to get to the behavior you want you can do something like pause: typeof window === 'undefined'. This is because a NextJS client component is still first rendered on the server and each Suspense boundary is streamed in.

khuongtp commented 8 months ago

Hi @JoviDeCroock , is the hook import from @urql/next somewhat a server action, if so I think it would be great that we have it documented

JoviDeCroock commented 8 months ago

No, hooks are inherently for client components and server-actions/server-components are in the /rsc folder 😅 I know this is confusing in general but this is the paradigm we got from React/Next to work with. use server means it is always executed on the server and client-components get executed once on the server and then live on the client.