React Query Context Identity Issue with `@kubernetesjs/react` in Next.js

[pyramation]

Summary

We're encountering a React context identity issue in the Next.js dashboard app when using hooks from the @kubernetesjs/react package. These hooks use TanStack Query (@tanstack/react-query) under the hood, but in the context of Next.js (especially with SSR), React treats the context reference as different — even when a QueryClientProvider is present at the top level of the app.

This results in useQuery() or useMutation() calls inside the imported hooks acting as if there's no provider, causing errors or undefined results.

---

💡 Temporary Fix

The working workaround is to explicitly pass context: defaultContext in the options of every hook usage:

import { defaultContext } from '@tanstack/react-query';
import { useReadCoreV1NamespacedConfigMapQuery } from '@kubernetesjs/react';

const result = useReadCoreV1NamespacedConfigMapQuery({
  path: { namespace: 'default', name: 'my-config' },
  options: {
    context: defaultContext,
    enabled: true,
  },
});

This ensures the hook uses the same QueryClient context as the one provided by the app.

---

🤯 Root Cause

React (and TanStack Query) rely on reference identity for context propagation. If the QueryClientProvider and the internal hook reference don’t come from the same in-memory Context object, React treats them as separate — even if the versions match.

In this case:

• The app provides a QueryClientProvider with defaultContext.
• The hook, compiled into @kubernetesjs/react, may reference a different Context (e.g. due to bundling or module boundary).
• Result: useQuery sees no provider.

This is especially problematic in SSR and Next.js environments where module scoping, ESM/CJS boundaries, or Webpack deduping can misalign.

---

🛠 Proposed Solutions

1. Short-term: Keep using context: defaultContext for all hook usages.

2. Package fix (in @kubernetesjs/react):

   • Export defaultContext from the package to ensure unified usage.

     export { defaultContext } from '@tanstack/react-query';

   • (Optional) Wrap all generated hooks using a helper like withDefaultContext(hook) to apply it automatically.

3. Ensure @tanstack/react-query is a peer dependency in @kubernetesjs/react, not a bundled dependency:

   "peerDependencies": {
     "@tanstack/react-query": "^5.x"
   }

4. Enforce module resolution in the dashboard app’s next.config.js:

   // next.config.js
   webpack: (config) => {
     config.resolve.alias['@tanstack/react-query'] = require.resolve(
       'next/node_modules/@tanstack/react-query'
     );
     return config;
   };

---

✅ Action Items

• Add context: defaultContext to all uses of hooks from @kubernetesjs/react
• Audit hook generator or export points in @kubernetesjs/react for re-usable context
• Confirm peer dependency setup in the package
• Investigate automating context injection in the dashboard app via a wrapper

[pyramation]

TanStack/query#3595