ssrExchange deletes synchrnous errored results too eagerly on rehydration

urql version & exchanges: “@urql/exchange-graphcache”: “^3.0.1” “urql”: “^1.9.8”

Hello I have a question, I’m currently using server side rendering with URQL. I’m fetching the data on server side using react-ssr-prepass. Then I send the data to client side with ssr.extractData(). So in this case I’m hydrating the data into the ssrExchange cache on client. So on the client side if I want to reference the cache that I already populated from the server side by using cache-only instead of cache-first so that I don’t have to use another API call on the client side.

export const useQueryUserMe = (): UseQueryResponse<UserMe> => useQuery({
    query: GET_ME,
    requestPolicy: typeof window !== "undefined" ? "cache-only" : "cache-first"
});

So on the client side I’m using cache-only and on the server side I’m using cache-first. The reason why I’m doing this is because if I get a 401 unauthorized error on server side, I don’t want to call this again on the client side. But I do want to use the query to check if user exist in the cache or not. However the issue I’m getting on client-side is that the data is always null if I use cache-only even though the cache should already been populated from server side hydration. Is there a way that I can call the query only on server side only and on the client side I will only fetch it from the cache regardless if it is already hydrated or not from ssr?

[sinwailam193]

Hi @kitten, thank you for taking your time to answer my questions. So I did try the cache-first approach, however, for some reason on the client side, it is still making the call even though the server side already returns errors for it.

To give you context in the console, the first undefined is the data and the boolean in the middle is the fetching flag and the last output is the error. As you can see from the screenshot, the server side already hydrated the error that was received on the server side. But, on the client side, it is making the call again and fetching is set to true. Is there anything that I may have missed, because according to your answer above, cache-first should already provide the functionality, where if an error has already occurred on server side, there is no need to call again on client side, if I’m not wrong?

This is my current setup for createClient

const options: ClientOptions = {
        url: "/api/graphql",
        exchanges: [
            dedupExchange,
            cacheExchange({}),
            ssr, // Add `ssr` in front of the `fetchExchange`,
            fetchExchange
        ]
    };

[sinwailam193]

Thank you for taking a look into this, much appreciated. As for the errors that are captured on client side via cacheExchange I would certainly react to it appropriately, thank you for the tip.