Update Next.js example to use latest App router

[luchillo17]

Problem

The Next.js library has released the App router as stable, the current example uses the old way pages router.

Solution

Either update the current example or add one that shows how the integration is supposed to work, both with RSC and Client Components.

Additional context

I don't know enough about Apollo or Next.js 13 to give technical suggestions.

[mjfwebb]

Hi @luchillo17, thanks for pointing this out.

I agree it would be nice to get the neo4j example updated to use the new app router.

This isn't a priority for us to update at the moment. PRs are very welcome for this change (a PR to next.js) and we would happily review it.

[luchillo17]

I'm having a hard time getting my own project to work properly, if I mange to then sure I would make a PR.
apollo-server-integrations/apollo-server-integration-next#113

[darrellwarde]

The Next.js maintainers deleted our example in their repo, so we can't maintain it any more. 🤷

[luchillo17]

Technically we can still get to the old example, just have to use a tag version or older branch:
https://github.com/vercel/next.js/tree/v14.0.0/examples/with-apollo-neo4j-graphql

@darrellwarde Do you think that is enough to have as a starter to update to the latest NextJS with the App router?

[luchillo17]

The original reason I wanted an updated version is that in the recent versions of @neo4j/graphql the constructor is not the same anymore, now you have to call getSchema() which is async, meaning this part of the old example can't work the same because then you would need top-level await or wrapping parts of the app in async functions.

https://github.com/vercel/next.js/blob/v14.0.0/examples/with-apollo-neo4j-graphql/apollo/schema.ts#L7-L10

In @neo4j/graphql@4.4.5 we have to call getSchema() that returns a promise with the generated GraphQLSchema, so I end up doing stuff like this, which unfortunately doesn't play nice with the usual way to setup SchemaLink:

Because atm the ApolloNextAppProvider doesn't accept an async client factory makeClient, I can't use SchemaLink in my NextJS app with the App router.

[mjfwebb]

@luchillo17 I am not sure if you've seen this, but here's an example I made to report a bug to NextJS: https://github.com/mjfwebb/nextjs-neo4j-graphql-error/blob/main/src/graphql/graphql.ts

Perhaps that can help?

[luchillo17]

Not really, my GraphQL API is working fine, the issue is with the wrapper that usually goes in layout.tsx for useQuery, useMutation and other hooks in SSR, specifically when trying to provide a SchemaLink for it when using server components so the request goes through directly to the schema instead of HttpLink, if I only use the HttpLink it works fine already, you could say this is a very specific corner case.

This is the latest iteration, almost got it to work, got adviced to add another component with a Suspense scope and store the promise in that one, then pass it as prop to this wrapper:

[mjfwebb]

If your main issue is getting around having to use async/await because of NextJS interface problems I would suggest trying .then().catch() instead.

[luchillo17]

Nope, the issue here is the execution context for SSR NextJS, if this factory is called in the client, it should use HttpLink, if it's called in the server (server-side rendered then hydrated in the client) it should be with SchemaLink so the request goes directly through GraphQL instead of doing a request to the server, hopefully avoiding the HTTP call to the client, that's as far as I can understand of how SSR is supposed to work.