[4.0] `preloadQuery` variables don't update when they change

[BrennenRocks]

Issue Description

https://community.apollographql.com/t/preloadquery-without-topromise-in-v4/9409/4

  loader: async ({ params }) => {
    const queryRef = preloadQuery(Deal_Query, {
      fetchPolicy: 'cache-and-network',
      variables: { dealId: params.dealId }, // <--- When `params.dealId` changes the queryRef doesn't update
    });

    return preloadQuery.toPromise(queryRef);
  },

Workaround

  loader: async ({ params }) => {
    const queryRef = preloadQuery(Deal_Query, {
      fetchPolicy: 'cache-and-network',
      variables: { dealId: params.dealId },
    });

    const q = await preloadQuery.toPromise(queryRef);
    // @ts-expect-error
    q.dealId = params.dealId;
    return q;
  },

Link to Reproduction

none

Reproduction Steps

@apollo/client version

4.0.2

[phryneas]

Let's take a step back here :)

Generally, the variables of the queryRef here would never change - you should get a new, completely indeptendent, queryRef each time that preloadQuery is called.

Are you saying that multiple queryRef instances are created and they all have the same variables despite preloadQuery being called with different arguments, or are they created with different variables, but your component doesn't receive any queryRef instances beyond the first one from the loader?

[BrennenRocks]

Heya 👋

I am saying that when I go to a new URL with a new dealId param and it fires the loader function again my useReadQuery will give me the data from the first dealId param that it launched with.

With the image above if I went to a 3rd page with a dealId of 1234 my data output would still be for 8112

[jerelmiller]

@BrennenRocks thanks! I'll respond here instead of the community post 🙂

Ok so that extra property "fixing" the issue gave us a big clue why I think this is happening. TanStack Router uses the concept of "structural sharing" which is enabled by default. In this case, I think the queryRef objects look too similar to each other and the router thinks they are the same thing, so it returns the previous query ref. Take a look at TanStack/router#4237 by @phryneas which describes a very similar scenario to what you're seeing. I think you'll need to turn off structural sharing here on the router level to get this to work. Can you try that?

[BrennenRocks]

Ah yes I remember that PR, another issue I was having led us there haha

So I do have defaultStructuralSharing: true I turned it off but it didn't help. Do we know if that option just affects search params?

[jerelmiller]

I didn't think it was just for search params. Another issue (#12619) led to the creation of that PR which also uses loader with query refs. The only difference in v4 vs v3 is that .toPromise function is no longer present on the queryRef object, but otherwise the structure is the same. What version of the router are you using? Are you using > 1.120.10 by chance? I think that change was introduced in that version.

[jerelmiller]

Ha just found your comment in that thread so I'm going to assume you are 😂.

As for a reproduction, you asked for an endpoint you can use. Can you try https://countries.trevorblades.com/? I think that would really help here (and would save us some time getting a repo spun up).

[BrennenRocks]

Yes I had to upgrade my @tanstack/router so it would preload properly in v3

current version "@tanstack/react-router": "^1.131.28"

[BrennenRocks]

@jerelmiller Ok here is a repo that replicates the issue I'm facing

https://github.com/BrennenRocks/preload-apollo-client-v4

I didn't focus on making the gql typesafe and I used Cursor to help build things out so forgive the anys and obvious AI code 😅

The actual preloadQuery happens in $countryId.tsx

[jerelmiller]

Totally fine! Reproductions are for seeing the runtime behavior anyways. Thanks! I'll dive into this this afternoon 🙂

[jerelmiller]

Ok I think I may have narrowed it down to @tanstack/react-store and the useStore hook. That uses useSyncExternalStoreWithSelector with the shallow function to compare objects to determine if they are equal.

That shallow comparator calls Object.keys to try and compare objects and this returns an empty array for the queryRef object because queryRef only defines symbol keys. This makes that shallow comparison think the queryRef objects are equal, so you end up with the old queryRef.

Apollo Client 3 worked because it had a defined toPromise property with a function value, so the Object.is check returned false when comparing. This forced useLoaderData to return the new queryRef object. This would explain why adding a property to the queryRef in the loader fixes it since you've added an key that can be returned by Object.keys. Seems structuralSharing doesn't really play a role here at all.

Seems this will need to be fixed downstream in @tanstack/react-store for this to work. I'll file an issue there and start a discussion. Worse-case scenario, we might need to add some kind of "cache breaker"/id property to the queryRef to fix on our end, but I'll see where the discussion goes over in the other repo.

[jerelmiller]

Ok I put up TanStack/store#227 to see if we can get it fixed downstream 🙂

[phryneas]

That PR has been merged so this should be solved upstream very soon.