erquhart•5mo ago

Convex Query Cache context not reachable for useQuery

I'm using the query cache provider and hook from convex-helpers. I've set it up properly and checked that the hook actually is getting the context object, but the register key of the object is null, which is what causes it to throw. I have a lot of providers, including my own custom ones, and I've never had one inexplicably not have a context value make it down the tree. I don't have a repro put together or anything, but just wanted to see if anyone had run into this, or had any ideas.

21 Replies

erquhartOP•5mo ago

This is the error I'm getting: https://github.com/get-convex/convex-helpers/blob/e4aad08c6947a5f3c15b28280eccdec1fdcfe9a9/packages/convex-helpers/react/cache/hooks.ts#L72-L77

GitHub

convex-helpers/packages/convex-helpers/react/cache/hooks.ts at e4aa...

A collection of useful code to complement the official packages. - get-convex/convex-helpers

erquhartOP•5mo ago

  const { registry } = useContext(ConvexQueryCacheContext);
  if (registry === null) {
    throw new Error(
      "Could not find `ConvexQueryCacheContext`! This `useQuery` implementation must be used in the React component " +
        "tree under `ConvexQueryCacheProvider`. Did you forget it? ",
    );
  }

  const { registry } = useContext(ConvexQueryCacheContext);
  if (registry === null) {
    throw new Error(
      "Could not find `ConvexQueryCacheContext`! This `useQuery` implementation must be used in the React component " +
        "tree under `ConvexQueryCacheProvider`. Did you forget it? ",
    );
  }

These lines are run by useQueries, which is run by the useQuery hook for the cache helper. I think if you weren't wrapped in the provider, there wouldn't even be an object with a registry key, it'd just be null instead of the object, right? Not positive on that. bump

jamwt•5mo ago

is this react native?

erquhartOP•5mo ago

Yes are you about to say something that's going to make me sad Jamie

jamwt•5mo ago

oh man that's a lot of pressure tries to think of the most devestating thing to say

erquhartOP•5mo ago

"it doesn't work on react native" would be the devastating thing to say 🙈

ballingt•5mo ago

This sounds a bit like having two version of React installed, what version of React are you using @erquhart?

erquhartOP•5mo ago

18.2.0, you can see the helpers version deduped at top and the direct dependency at the bottom

jamwt•5mo ago

@ian was asking about this just now

ian•5mo ago

Yeah I've seen this when the version of React pulled in by helpers somehow differs from the one used by the UI. This has the latest version of helpers I assume? Is it using pnpm workspaces or other bundling things?

Michal Srb•5mo ago

I'd rm node_modules / pnpm cache and reinstall just to make sure

erquhartOP•5mo ago

yeah it's 0.1.50, you can see at the top of the screen grab above It's an expo app, uses Metro bundler, nothing else. npm for package manager. Will try nuking node_modules Thanks y'all, appreciate the help

marwand•5mo ago

I'm getting the same error w/ react-native@0.73.6, react@18.2.0 expo@50 convex-helpers@0.1.50 convex@1.14.1 Using yarn as the package manager

erquhartOP•5mo ago

I think we're getting ahead of what this error actually means. I'm fairly certain that calling useContext() from outside of the referenced provider would lead to an undefined value. The error I linked earlier, from the source of the helper, is checking for { result: null } - I don't believe you would have that object from useContext if you were outside of the provider. I believe checking this way is producing false positives. The troubleshooting here has been on the assumption that the hook isn't accessing the provider, which is why we're asking about multiple versions of react. I don't believe that's what's happening here. Whatever this is seems likely to be react native specific. I'll do some more troubleshooting when I have time to try this helper again.

marwand•5mo ago

@erquhart You're right, I looked into it & it looks like its because we're importing the ConvexQueryCacheContext from .../provider instead of .../provider.js. This caused another error where it complained about crypto being undefined, I got around that by using uuid as a drop replacement. Thanks for the insight! I created an issue with a patch to get around it: https://github.com/get-convex/convex-helpers/issues/211

GitHub

Query Caching on Expo / React native · Issue #211 · get-convex/conv...

Hi! Firstly, thank you for your work on this project! 🙂 I'm here to report a bug that prevents using Query Caching on expo/react-native. This is an extension of the discussion on this thread: h...

erquhartOP•5mo ago

Oh good catch!! Thanks for the patch, will try that out!

marwand•5mo ago

Of course! Make sure you add uuid as a dependency though

erquhartOP•5mo ago

I actually already have it, but I'm surprised uuid works for you in the client, I had issues with it and ended up on react-native-uuid. Can't remember what the issue was, crypto api or something

ian•5mo ago

also following up here - I just cut an alpha with a fix which will hopefully resolve the multiple providers and. Can you verify npm i convex-helpers@0.1.51-alpha.4 works for you? If it's looking good I'll release an official version tomorrow. I ended up just making my own uuid fallback that will suffice for this use-case:

Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2);

Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2);

erquhartOP•5mo ago

perfect

ian•5mo ago

npm i convex-helpers@latest now has it