Sharing QueryClient between React Query 4 and React Query 5

[alonronin]

Why?

I have micro frontend apps with legacy React 17 and React Query 4 that cannot upgrade, and I want to share the cache between apps with React 18 and React Query 5 and React 17 and React Query 4.

QueryClient from @tanstack/query-core

I've created an instance of QueryClient with the @tanstack/query-core package and passed it to the window object in each iframe.

It works! well, kind of 😟.

As a matter of fact, it works, if I navigate with the router between two pages (Next.js App) it passes the client and shows the same results without a network request, however on hard refresh I get an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at QueryObserver.onQueryUpdate (queryObserver.mjs:473:1)
    at eval (query.js:343:18)
    at Array.forEach (<anonymous>)
    at eval (query.js:342:22)
    at Object.batch (notifyManager.js:24:16)
    at #dispatch (query.js:341:66)
    at Query.fetch (query.js:205:21)
    at QueryObserver.executeFetch (queryObserver.mjs:191:1)
    at QueryObserver.onSubscribe (queryObserver.mjs:28:1)
    at QueryObserver.subscribe (subscribable.mjs:12:1)

I also get the error on client router but only on hard refresh, or if I start with the React 17 and React Query 4 route, it breaks the app.

The Next.js App

in a route at the app directory i'm rendering a page with this simplified version of the iframe:

'use client';

import { useLayoutEffect, useRef } from 'react';
import { QueryClient } from '@tanstack/query-core';

declare global {
    interface Window {
        queryClient: QueryClient;
    }
}

const queryClient = new QueryClient();

export function Iframe() {
    const ref = useRef<HTMLIFrameElement>(null);

    useLayoutEffect(() => {
        if (!ref.current) return;

        ref.current.contentWindow && (ref.current.contentWindow.queryClient = queryClient);

    }, []);

    return <iframe ref={ref} />;
}

Mfe Apps

The apps are the same, one with React 17 and RQ 4 and one with React 18 and RQ 5 and this is the index.ts.

React 18:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './reset.css';
import App from './App';

declare global {
  interface Window {
    queryClient: QueryClient;
  }
}

const queryClient = window.queryClient || new QueryClient();

const rootEl = document.getElementById('root');
if (rootEl) {
  const root = ReactDOM.createRoot(rootEl);
  root.render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </React.StrictMode>,
  );
}

React 17:

import React from 'react';
import ReactDOM from 'react-dom';
import './reset.css';
import App from './App';

declare global {
  interface Window {
    queryClient: QueryClient;
  }
}

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = window.queryClient || new QueryClient();

const rootEl = document.getElementById('root');

if (rootEl) {
  ReactDOM.render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </React.StrictMode>,
    rootEl,
  );
}

Conclutsion

What do you think, is it possible or I am too ambitious?

I thought that the query client should be stable, and could shared between versions.

Would appreciate your thoughts.