feat: react-query provider

Offers a global QueryClientProvider for a shell site.

Author: arbrandes

docs/how_tos/migrate-frontend-app.md

@@ -716,6 +716,12 @@ frontend-app-account should use the supported language list from frontend-base,
 This would help it match the behavior of the footer's language dropdown.
 
 
+Upgrade react-query
+===================
+
+If the MFE uses react-query version 4 or below, upgrade it to 5 as per [this guide](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5).
+
+
 Removal of pubsub-js
 ====================
 

package-lock.json

@@ -140,6 +140,7 @@
   },
   "peerDependencies": {
     "@openedx/paragon": "^22.20.2",
+    "@tanstack/react-query": "^5.81.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^8.1.3",

package.json

@@ -1,6 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import {
   SITE_INIT_ERROR,
@@ -14,6 +15,7 @@ import messages from './i18n';
 import createRouter from './router/createRouter';
 
 subscribe(SITE_READY, async () => {
+  const queryClient = new QueryClient();
   const router = createRouter();
 
   addAppConfigs();
@@ -22,7 +24,9 @@ subscribe(SITE_READY, async () => {
   const root = createRoot(document.getElementById('root') as HTMLElement);
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />,
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />,
+      </QueryClientProvider>
     </StrictMode>
   );
 });