useSuspenseQuery reverts back to variables set in PreloadQuery when search params change

[Tam]

We have a query setup that has some default variables on the server that can then change on the client. As an example:

const QUERY = gql`
    query GetChart ($id: UUID!, $compact: Boolean) {
        # ...
    }
`;

// Server
// =========================================================================

return (
    <PreloadQuery query={QUERY} variables={{ id, compact: true }}>
        {/* ... */}
    </PreloadQuery>
);

// Client
// =========================================================================

const [compact, setCompact] = useState(true);
const { data } = useSuspenseQuery(QUERY, {
    variables: { id, compact },
    fetchPolicy: 'cache-and-network',
});

The user can change the value of compact on the client.

If the search parameters then change (in our case clicking an "Edit" button might open a modal by pushing to the same route with ?edit=true) the compact state will persist with whatever value the user has set, but the value of data will revert back to whatever the initial value was loaded from the server.

In the example above this means that if the user changed compact from true to false and then clicked an "Edit" button, the graphql data would revert back to seeing compact as true while the rest of the UI would still be seeing it as false.

Package	Version
@apollo/client	3.11.8
@apollo/experimental-nextjs-app-support	0.11.5
next	15.0.1
react	18

[phryneas]

That really seems curious. I know it's a big ask, but could you maybe please create a small reproduction for this issue?