apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.34k stars 2.66k forks source link

@apollo/client reactive var state changes are not reflecting across libraries #11953

Closed gayathrirajendran closed 2 months ago

gayathrirajendran commented 2 months ago

Issue Description

Changes that happen to the state of a reactive var does not reflect in a library where the var is used, but reflects in the place where the trigger exists to update the state.

I have a library lib-a which creates a reactive var using @apollo/client makeVar. Also it has a component which can update the state of the reactive var. Both the reactive var and the component to update it are exported from lib-a. Another library "lib-b", has lib-a in its dependencies and imports the exported reactive var from lib-a. It exports a component which displays the state of the reactive var imported from lib-a. In another react application, both lib-a and lib-b are dependencies. It imports the component to update the state of reactive var from lib-a and imports the component which shows it from lib-b. Now when the update on state is triggered from component from lib-a, the component from lib-b is not able to show the updates on the reactive state.

Link to Reproduction

https://stackblitz.com/~/github.com/gayathrirajendran/sample-spa

Reproduction Steps

  1. Click button "Update access token"
  2. See change only in spa and notice that the same reactive var used in lib-b is not showing updates
  3. lib-b reactive var is not showing any updates.

Is there a way for even lib-b to show the updated state by listening to all updates that happen to a reactive var created with makeVar?

Link for lib-a: https://github.com/gayathrirajendran/lib-a for lib-b: https://github.com/gayathrirajendran/lib-b Link for sample-spa: https://stackblitz.com/~/github.com/gayathrirajendran/sample-spa https://github.com/gayathrirajendran/sample-spa

@apollo/client version

3.8.10

phryneas commented 2 months ago

I believe that has to do with how you bundle your libraries - they inline their dependencies, so you will create multiple independent copies of parts of @apollo/client, @wry/context and others.

From that point on, these independent copies don't know about each other anymore.

In your build setup, you'll have to treat these libraries as external dependencies - also because otherwise you'll ship the same code a lot of times to your users.

gayathrirajendran commented 2 months ago

@phryneas @apollo/client is already a peer dependency / dev dependency only. Also in vite config build options, they are externalized. Is there any other way to externalize it ?

image

image

image

phryneas commented 2 months ago

It looks better now - this is the version from this morning:

https://unpkg.com/browse/z-library-b@1.0.11/dist/ComponentB.js

and this is the current version:

https://unpkg.com/browse/z-library-b@1.0.12/dist/ComponentB.js

Are you sure the problem still applies?

gayathrirajendran commented 2 months ago

yes @phryneas, even after externalizing it still appears, I had externalized in my work app, just forgot to do that in this minimal repro. You can see the issue happening after externalizing too. Please suggest if there is a better way to externalize

phryneas commented 2 months ago

In the repro, it seems to update the lib b token, or am I missing something here?

image

gayathrirajendran commented 2 months ago

cool, had been checking in a heavily cached place, works now, thanks a lot @phryneas !

github-actions[bot] commented 2 months ago

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

github-actions[bot] commented 1 month ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.