Is it possible to use next-urql & @urql/next while incrementally adopting the app router?

[seanparmelee]

Hello,

We have some Next.js applications using the pages router and next-urql and we're looking to start migrating to the app router. I was curious if it should be possible to incrementally adopt the app router with urql such that we have some routes that use next-urql and others that use @next/urql as well as share queries?

While working on adding a new route under the app router, one of our existing components got into a infinite loop calling useQuery. When I updated the component to import { useQuery } from '@next/urql'; that seemed to have resolved that issue, but then I started getting a ERR_MODULE_NOT_FOUND error when testing whether my changes work with the pages router.

Error: Cannot find module '/<project_path>/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/next/navigation' imported from /<project_path>/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@urql/next/dist/urql-next.mjs
Did you mean to import [email protected]_@[email protected][email protected][email protected][email protected]/node_modules/next/navigation.js?

While searching around I came across this discussion where one of the answers was to update the codegen config to have

urqlImportFrom: "@urql/next"

Which had me wondering whether what I'm trying to do is even feasible and how best to incrementally adopt the app router when using urql.

[JoviDeCroock]

If you aren't using the hooks auto-generate you can import from @urql/core for the gql helper, however I think that combining the two proves difficult. The import of next/navigation isn't allowed in context of a pages/ entry-point which means that none of the components used can utilise @urql/next 😅

We should think a bit more about this I reckon, the issue for which we need next/navigation is to inject data that is resolved during the streamed render into the html being sent to the client 😅

In theory it should be possible to use @urql/next/rsc in combination with next-urql but not sure if you only need rsc

[seanparmelee]

Thanks for your response @JoviDeCroock.

I'm not sure how much a difference this makes, but wanted to clarify that we're not using typescript-urql; we're using @graphql-codegen/client-preset. I also mentioned next-urql, but it seems that package is irrelevant for the issue we're seeing; it seems to boil down to which package hooks like useQuery are imported from (urql vs @urql/next). We have some custom hooks & components that make use of useQuery and useMutation (imported from urql) and it seems like we may not be able to use them with the app router (unless we update the imports to come from @urql/next, which of course breaks things for the pages router).

In case it helps, I've created a very crude example here: https://github.com/seanparmelee/next-urql-3438

http://localhost:3000 is served via the pages router and performs the query just fine
http://localhost:3000/new is served via the app router and will execute the query indefinitely (check the network console).

I ultimately wanted to confirm whether this is known/expected or if maybe I'm missing something.

Thanks in advance!

[CaptainN]

In one of my projects we are also undertaking a migration to app router. The way we have decided to do it is to separate the entire component trees for both routers. It's not really feasible to mix them, because of the reasons explained above. But as long as your tree is clean for each of app/some-route, and pages/some-route - you can build 2 apps successfully (internally, if you have both routers in your next project, you'll essentially get 2 bundles - or really, 2 sets of bundles).

(In my case, the pages router will continue to use the bloated apollo-client, while the new app router will use @urql/nextjs. I've found the process of migrating components to a new separate components folder for the app router, to be VERY useful for cleaning out cruft that has accumulated over many years in this particular app.)

[seanparmelee]

The way we're currently working around this is by adding a UrqlHooksProvider component to the component trees and passing in the urql hooks (imported from urql for the pages router, and imported from @urql/next for the app router). Then, in any component/hook that's shared between both routers can call a useUrqlHooks() hook to get the appropriate set of hooks. Of course, this is only temporary as we migrate everything over to the app router, after which we can remove this provider & hook.