fix: Ensure query key is prefix by session scope (#695)

* Pass globalThis.seamQueryClient from SeamProvider

* fix: Ensure query key is prefix by session scope

* Return queryKeyPrefixes in context

* feat: Enable using SeamQueryProvider inside existing QueryClientContext

Author: razor-x

src/lib/seam/SeamProvider.tsx

@@ -69,6 +69,7 @@ export function SeamProvider({
   disableFontInjection = false,
   unminifiyCss = false,
   telemetryClient,
+  queryClient,
   ...props
 }: SeamProviderProps): JSX.Element {
   useSeamStyles({ disabled: disableCssInjection, unminified: unminifiyCss })
@@ -89,7 +90,10 @@ export function SeamProvider({
         disabled={disableTelemetry}
         endpoint={endpoint}
       >
-        <SeamQueryProvider {...props}>
+        <SeamQueryProvider
+          queryClient={queryClient ?? globalThis.seamQueryClient}
+          {...props}
+        >
           <Provider value={value}>
             <Telemetry>{children}</Telemetry>
           </Provider>

src/lib/seam/SeamQueryProvider.tsx

@@ -3,7 +3,11 @@ import type {
   SeamHttpEndpoints,
   SeamHttpOptionsWithClientSessionToken,
 } from '@seamapi/http/connect'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClient,
+  QueryClientContext,
+  QueryClientProvider,
+} from '@tanstack/react-query'
 import {
   createContext,
   type PropsWithChildren,
@@ -21,6 +25,7 @@ export interface SeamQueryContext {
   publishableKey?: string | undefined
   userIdentifierKey?: string | undefined
   clientSessionToken?: string | undefined
+  queryKeyPrefix?: string | undefined
 }
 
 export type SeamQueryProviderProps =
@@ -31,6 +36,7 @@ export type SeamQueryProviderProps =
 export interface SeamQueryProviderPropsWithClient
   extends SeamQueryProviderBaseProps {
   client: SeamHttp
+  queryKeyPrefix: string
 }
 
 export interface SeamQueryProviderPropsWithPublishableKey
@@ -86,10 +92,21 @@ export function SeamQueryProvider({
   }
 
   const { Provider } = seamContext
+  const queryClientFromContext = useContext(QueryClientContext)
+
+  if (
+    queryClientFromContext != null &&
+    queryClient != null &&
+    queryClientFromContext !== queryClient
+  ) {
+    throw new Error(
+      'The QueryClient passed into SeamQueryProvider is different from the one in the existing QueryClientContext. Omit the queryClient prop from SeamProvider or SeamQueryProvider to use the existing QueryClient provided by the QueryClientProvider.'
+    )
+  }
 
   return (
     <QueryClientProvider
-      client={queryClient ?? globalThis.seamQueryClient ?? defaultQueryClient}
+      client={queryClientFromContext ?? queryClient ?? defaultQueryClient}
     >
       <Provider value={value}>
         <Session onSessionUpdate={onSessionUpdate}>{children}</Session>
@@ -128,6 +145,11 @@ const createSeamQueryContextValue = (
   options: SeamQueryProviderProps
 ): SeamQueryContext => {
   if (isSeamQueryProviderPropsWithClient(options)) {
+    if (options.queryKeyPrefix == null) {
+      throw new InvalidSeamQueryProviderProps(
+        'The client prop must be used with a queryKeyPrefix prop.'
+      )
+    }
     return {
       ...options,
       endpointClient: null,

src/lib/seam/use-seam-client.ts

@@ -8,6 +8,7 @@ import { useSeamQueryContext } from './SeamQueryProvider.js'
 export function useSeamClient(): {
   client: SeamHttp | null
   endpointClient: SeamHttpEndpoints | null
+  queryKeyPrefixes: string[]
   isPending: boolean
   isError: boolean
   error: unknown
@@ -17,6 +18,7 @@ export function useSeamClient(): {
     clientOptions,
     publishableKey,
     clientSessionToken,
+    queryKeyPrefix,
     ...context
   } = useSeamQueryContext()
   const userIdentifierKey = useUserIdentifierKeyOrFingerprint(
@@ -27,6 +29,7 @@ export function useSeamClient(): {
     [SeamHttp, SeamHttpEndpoints]
   >({
     queryKey: [
+      ...getQueryKeyPrefixes({ queryKeyPrefix }),
       'client',
       {
         client,
@@ -73,6 +76,12 @@ export function useSeamClient(): {
   return {
     client: data?.[0] ?? null,
     endpointClient: data?.[1] ?? null,
+    queryKeyPrefixes: getQueryKeyPrefixes({
+      queryKeyPrefix,
+      userIdentifierKey,
+      publishableKey,
+      clientSessionToken,
+    }),
     isPending,
     isError,
     error,
@@ -117,3 +126,29 @@ This is not recommended because the client session is now bound to this machine
 
   return fingerprint
 }
+
+const getQueryKeyPrefixes = ({
+  queryKeyPrefix,
+  userIdentifierKey,
+  publishableKey,
+  clientSessionToken,
+}: {
+  queryKeyPrefix: string | undefined
+  userIdentifierKey?: string
+  publishableKey?: string | undefined
+  clientSessionToken?: string | undefined
+}): string[] => {
+  const seamPrefix = 'seam'
+
+  if (queryKeyPrefix != null) return [seamPrefix, queryKeyPrefix]
+
+  if (clientSessionToken != null) {
+    return [seamPrefix, clientSessionToken]
+  }
+
+  if (publishableKey != null && userIdentifierKey != null) {
+    return [seamPrefix, publishableKey, userIdentifierKey]
+  }
+
+  return [seamPrefix]
+}

src/lib/seam/use-seam-query.ts

@@ -23,11 +23,15 @@ export function useSeamQuery<T extends SeamHttpEndpointQueryPaths>(
   options: Parameters<SeamHttpEndpoints[T]>[1] &
     QueryOptions<QueryData<T>, SeamHttpApiError> = {}
 ): UseSeamQueryResult<T> {
-  const { endpointClient: client } = useSeamClient()
+  const { endpointClient: client, queryKeyPrefixes } = useSeamClient()
   return useQuery({
     enabled: client != null,
     ...options,
-    queryKey: [endpointPath, parameters],
+    queryKey: [
+      ...queryKeyPrefixes,
+      ...endpointPath.split('/').filter((v) => v !== ''),
+      parameters,
+    ],
     queryFn: async () => {
       if (client == null) return null
       // Using @ts-expect-error over any is preferred, but not possible here because TypeScript will run out of memory.