Skip to content

fix(expo): synchronous QueryClient for React Native#8087

Open
chriscanin wants to merge 3 commits intomainfrom
chris/fix-query-client-rn
Open

fix(expo): synchronous QueryClient for React Native#8087
chriscanin wants to merge 3 commits intomainfrom
chris/fix-query-client-rn

Conversation

@chriscanin
Copy link
Member

@chriscanin chriscanin commented Mar 16, 2026

Summary

  • clerk-js lazily loads QueryClient from @tanstack/query-core via rspack's dynamic import('./query-core') code-splitting
  • On React Native, Metro bundles everything into a single file — rspack's chunk loading (l.e("675")) never resolves, so clerk.__internal_queryClient stays undefined
  • The useClerkQueryClient hook falls back to a no-op mock proxy when undefined, causing useOrganizationList, useSessionList, and other query-based hooks to silently return empty data
  • Fix: Object.defineProperty override in createClerkInstance.ts that synchronously creates a QueryClient via require('@tanstack/query-core') on first access, returning the expected { __tag: 'clerk-rq-client', client } shape

Reported by

Donovan (internal) — useOrganizationList returns empty data on React Native

Test plan

  • @clerk/expo builds successfully with the change
  • TypeScript declarations pass
  • Verify useOrganizationList returns data on React Native after fix
  • Verify other query-based hooks (useSessionList, etc.) work correctly

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Bug Fixes

    • Query-based hooks (e.g., organization list) on React Native/Expo now reliably load and display results instead of returning empty data.
  • Chores

    • Published a patch release for Expo to address the issue and improve runtime behavior on first access.

@changeset-bot
Copy link

changeset-bot bot commented Mar 16, 2026

🦋 Changeset detected

Latest commit: 944baf9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clerk/expo Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the expo label Mar 16, 2026
@vercel
Copy link

vercel bot commented Mar 16, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Mar 18, 2026 6:25pm

Request Review

@pkg-pr-new
Copy link

pkg-pr-new bot commented Mar 16, 2026

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@8087

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8087

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8087

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8087

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8087

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8087

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8087

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8087

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8087

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8087

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8087

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8087

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8087

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8087

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8087

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8087

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8087

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8087

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8087

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8087

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8087

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8087

commit: 944baf9

@chriscanin chriscanin self-assigned this Mar 16, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 16, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Pro

Run ID: 53e29055-3695-4ca6-89f6-e962534abf7d

📥 Commits

Reviewing files that changed from the base of the PR and between c9d5b96 and 55b9454.

📒 Files selected for processing (1)
  • packages/expo/src/provider/singleton/createClerkInstance.ts

📝 Walkthrough

Walkthrough

Adds a changeset file for a patch release and modifies the Clerk Expo provider to define a lazy, synchronous getter for the internal TanStack QueryClient (__internal_queryClient) during Clerk instance creation. The getter initializes and returns a QueryClient on first access. No exported or public API declarations were changed.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix(expo): synchronous QueryClient for React Native' directly and precisely summarizes the main change—adding synchronous QueryClient initialization for React Native. It is concise, specific, and clearly identifies the primary fix.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

…lity

clerk-js uses rspack code-splitting to lazily load QueryClient via
dynamic import('./query-core'). On React Native, Metro bundles everything
into a single file, so rspack's chunk loading never resolves and
__internal_queryClient stays undefined.

The useClerkQueryClient hook falls back to a no-op mock proxy when the
query client is undefined, causing hooks like useOrganizationList,
useSessionList, etc. to silently return empty data.

Fix: use Object.defineProperty to override the broken getter on the Clerk
instance with a synchronous version that creates a QueryClient via
require('@tanstack/query-core') on first access.
@jacekradko
Copy link
Member

jacekradko commented Mar 19, 2026

Code review

Found 1 issue:

  1. @tanstack/query-core is not declared as a dependency in packages/expo/package.json. The require('@tanstack/query-core') call at line 122 will fail at runtime if the package isn't resolvable from the @clerk/expo package context. While it is a transitive dependency via @clerk/clerk-js, strict package managers (pnpm) do not hoist transitive dependencies, so this require() will throw Cannot find module '@tanstack/query-core' for consumers. It needs to be added as a dependency or peerDependency in packages/expo/package.json.

// eslint-disable-next-line @typescript-eslint/no-require-imports
const { QueryClient } = require('@tanstack/query-core');
let queryClient: InstanceType<typeof QueryClient> | undefined;

🤖 Generated with Claude Code

- If this code review was useful, please react with 👍. Otherwise, react with 👎.

@chriscanin I think it makes sense to add @tanstack/query-core as a peerDependency of @clerk/expo. Otherwise we could expose it as a pass-through in @clerk/clerk-js so it's part of the explicit contract

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants