how to fix "Hydration failed" in NextJS when using createSyncStoragePersister?

[IonelLupu]

I have a NextJS app which renders some world locations in a list. This list rarely changes so I decided to use the createSyncStoragePersister to save it in localStorage:

export const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            cacheTime: 1000 * 60 * 60,
        }
    },
})
const localStoragePersister = createSyncStoragePersister({
    storage: typeof window !== 'undefined' ? window.localStorage : undefined, // have to do this for NextJS
})

persistQueryClient({
    queryClient,
    persister: localStoragePersister,
    dehydrateOptions: {
        shouldDehydrateQuery(query) {
            return ['search.popularLocations'].includes(String(query.queryKey[0]))
        },
    },
})

In my particular app, this specific request cannot be made on the server side. It's only made on the client side using useQuery. Now, NextJS renders this page on the server with an empty list as it doesn't have the data yet. That's ok, since my list is hidden under a button.

When the page loads, the localStoragePersister loads the data from the localStorage and then renders my list. The problem is, now React gives this error:

How can I make the persister load the cached data after the first render of the app so that React doesn't give this error anymore?

Packages used (we will migrate to v5 in the next weeks):

"@tanstack/react-query": "4.29.12",
"@tanstack/query-sync-storage-persister": "4.29.14",
"@tanstack/react-query-persist-client": "4.29.12",

[TkDodo]

please show a minimal runnable reproduction. There shouldn't be a hydration mismatch with that code.

[baljinnyamday]

did you fix it ?

[IonelLupu]

@b4ljk yes. I had to create a special hook for retrieving the data in an async way. Not ideal, but does the job:

/**
 * Use this function when you want to fix the "hydration" error in NextJS
 * @param store
 * @param callback
 */
export const useAsyncStore = <T, F>(store: (callback: (state: T) => unknown) => unknown, callback: (state: T) => F) => {
    const result = store(callback) as F
    const [data, setData] = useState<F>()

    useEffect(() => {
        setData(typeof result === 'function' ? () => result : result)
    }, [result])

    return data
}

/**
 * Use this function when you want to fix the "hydration" error in NextJS
 * @param key
 */
export const useAsyncStoreValue = <K extends keyof ContextData>(key: K) => {
    return useAsyncStore(yourContextNameHere, state => state[key])
}

And in my components I just use it like this:

function CurrencySelector() {
    const currencyCode = useAsyncStoreValue('currencyCode')

    return <>{currencyCode}</>
}