Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cache merge is producing extra network call #7034

Closed
dskelton-r7 opened this issue Sep 17, 2020 · 5 comments
Closed

Cache merge is producing extra network call #7034

dskelton-r7 opened this issue Sep 17, 2020 · 5 comments

Comments

@dskelton-r7
Copy link

dskelton-r7 commented Sep 17, 2020

Intended outcome:

Given two components, Component A and Component B that run the same query, with Component B requesting a little more from the graph.

When defining a custom merge function and using network-only on both components useQuery calls.

There should only be 2 network requests made. 1 for Component A and 1 for B.

Screenshot 2020-09-17 at 14 46 45

Actual outcome:
The request for Component A is made again after component B finishes.

How to reproduce the issue:
Using apollo client v3.2.0
https://codesandbox.io/s/awesome-gagarin-4rdyp?file=/src/App.js

Not happening using apollo client v2
https://codesandbox.io/s/nice-goodall-odfcy?file=/src/App.js

Versions
@apollo/[email protected]

@dskelton-r7
Copy link
Author

dskelton-r7 commented Sep 17, 2020

Think I figured this one, the fix is to add empty keyfields to address

cache: new InMemoryCache({
    typePolicies: {
      Address: {
        keyFields: []
      },
      User: {
        fields: {
          address: {
            merge: true
          }
        }
      }
    }
  })

@benjamn
Copy link
Member

benjamn commented Sep 17, 2020

@dskelton-r7 Thanks for answering your own question!

Since we're talking about an Address, I suspect you want keyFields: false (together with merge: true for User.address). The keyFields: [] configuration means that there's only ever one Address object in your whole application (a singleton), whereas keyFields: false means the Address will be embedded in its parent object (so you can have different addresses for different Users).

@dskelton-r7
Copy link
Author

@benjamn Thanks for the response. That makes sense, so I updated the example with keyFields: false and it's back to the original issue. There is 3 requests being made, In my application I need fetch-only for some calls which is why they are added here.

https://codesandbox.io/s/epic-stallman-jvw7q?file=/src/App.js

3_reqs

@dskelton-r7 dskelton-r7 reopened this Sep 18, 2020
@dskelton-r7
Copy link
Author

@benjamn I also just noticed this issue that seems similar in nature #6307
So I downgraded to @apollo/[email protected] and its not longer happening. Here is a reproduction of that.

Only 2 requests are being made here
https://codesandbox.io/s/infallible-gagarin-u32cz?file=/src/App.js

@hwillson
Copy link
Member

Let us know if this is still a concern with @apollo/client@latest - thanks!

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants