Skip to content

TypeError: Cannot read properties of null (reading 'useContext') #2266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task
jean-smaug opened this issue Apr 29, 2025 · 5 comments
Open
1 task

TypeError: Cannot read properties of null (reading 'useContext') #2266

jean-smaug opened this issue Apr 29, 2025 · 5 comments
Labels
bug Something isn't working openapi-react-query Relevant to openapi-react-query

Comments

@jean-smaug
Copy link

jean-smaug commented Apr 29, 2025

openapi-react-query version

0.3.1

Description

I'm building a React packages in order to share clients initialization across multiple apps
Inside those apps I try to make unit tests with Jest and I encountered the error in title TypeError: Cannot read properties of null (reading 'useContext')

Technical context :

  • Monorepo managed with PNPM 10.8.1
  • Node v22.14.0
  • jest 29.7.0
  • Transpiler for unit tests @swc/jest in 0.2.37

Image

Image

There are some issues, on invalid calls of hooks too

Image

Reproduction

import createFetchClient from "openapi-fetch";
import createClient from "openapi-react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { render } from "@testing-library/react";
import type MetadataService from "../../types/MetadataService";

const metadataClient = createClient(createFetchClient<MetadataService.paths>());

const TechnicalProof = () => {
  const { data: countries } = metadataClient.useQuery("get", "/v1/countries");

  console.log("🚀 ~ TechnicalProof ~ countries:", countries);

  return <div>Hello</div>;
};

describe("Example", () => {
  it("should render a component that use SDKs", () => {
    render(
      <QueryClientProvider client={new QueryClient()}>
        <TechnicalProof />
      </QueryClientProvider>,
    );
  });
});

Expected result

Understand this issue

Extra

@jean-smaug jean-smaug added bug Something isn't working openapi-react-query Relevant to openapi-react-query labels Apr 29, 2025
@mynnx
Copy link

mynnx commented Apr 30, 2025

Yeah, we're running into this too, in our app itself (not just tests). Currently troubleshooting.

@caribouflex
Copy link

I’m running into a similar issue here.

At first, I thought it might be because the monorepo had different versions of Tanstack/react-query, but I double-checked and everything looks good.

Using Tanstack’s useQuery directly works fine, but when I try using the client from openapi-react-query, I get the same error as mention above.

I also tried passing the same queryClient that’s used in the provider to useQuery, but no luck — same issue.

@EternalDeiwos
Copy link

This is probably related to #1947

@jean-smaug
Copy link
Author

ℹ With the following versions issue is fixed

    "@tanstack/react-query": "5.74.4",
    "openapi-fetch": "0.14.0",
    "openapi-react-query": "0.5.0",

@mynnx @caribouflex did you try to update recently ?

So we can close this issue

@caribouflex
Copy link

caribouflex commented May 15, 2025

@jean-smaug Yes it works correctly now on my side! Thank you 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working openapi-react-query Relevant to openapi-react-query
Projects
None yet
Development

No branches or pull requests

4 participants