apollographql / apollographql/apollo-client-integrations

[Bug] SchemaLink and Async schema duplicated GraphQL instance

Open
#217 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

Based on #188 having a Schema that is created async will give us lots of problems trying to use `SchemaLink`, the current state is that we can avoid using an absolute URL for the `HttpLink` if we use `SchemaLink` on the SSR side, however, if the Schema is generated async we need to handle the promise before it even lands in the `ApolloNextAppProvider`'s `makeClient` factory, which doesn't accept async factories.

The following was recommended as a way to handle the promise properly, it works and the site renders properly, but the SSR side gives an error about multiple `graphql` instances and the render takes longer than using `HttpLink` with absolute URL:

> As for `async` client components, you might want to use `use` instead, but it will require a split into two components and a suspense boundary to prevent your `clientFactory` from being called all over again:
>
> ```js
> function ParentWrapper({children}){
> const [promise] = useState(clientFactory)
> return {children}
> }
> function ChildWrapper({promise, children}){
> const makeClient = use(promise)
> return {children}
> }
> ```
>
> We can't do that on a library level since it would wrap all our user's applications into an additional suspense boundary and that changes general UX, so it the developer needs to be very aware of that.

Tried the `use` and `useState` thing, it worked but suddenly got this kind of issue, I scanned the lock file, it should only exist a single version of `graphql` in my app, maybe it is creating multiple instances?

![image](https://github.com/apollographql/apollo-client-nextjs/assets/9698639/07d42cf5-9c2d-4b63-acad-61de98c3f4d2)

_Originally posted by @luchillo17 in https://github.com/apollographql/apollo-client-nextjs/issues/188#issuecomment-1962179974_

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at ApolloNextAppProvider's makeClient entry point and the SchemaLink path for asynchronously created schemas; reproduce the SSR render using the use/useState wrapper described in the issue. Compare the SSR failure and render behavior with the HttpLink path, then define a fix that avoids duplicate graphql instances without imposing a library-level Suspense boundary.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, next.js, typescript
Domain
api, full-stack
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.