feat(useQuery, useMutation): accept client option (#95)

Author: alexkirsz

src/ApolloContext.tsx

@@ -19,9 +19,18 @@ export function ApolloProvider<TCacheShape = any>({
   );
 }
 
-export function useApolloClient<TCache = object>(): ApolloClient<TCache> {
+export function useApolloClient<TCache = object>(
+  overrideClient?: ApolloClient<TCache>
+): ApolloClient<TCache> {
   const client = useContext(ApolloContext);
 
+  // Ensures that the number of hooks called from one render to another remains
+  // constant, despite the Apollo client read from context being swapped for
+  // one passed directly as prop.
+  if (overrideClient) {
+    return overrideClient;
+  }
+
   if (!client) {
     // https://github.com/apollographql/react-apollo/blob/5cb63b3625ce5e4a3d3e4ba132eaec2a38ef5d90/src/component-utils.tsx#L19-L22
     throw new Error(

src/__tests__/useQuery-test.tsx

@@ -130,21 +130,25 @@ function Tasks({ query, ...options }: TasksProps) {
 }
 
 interface TasksWrapperProps extends TasksProps {
-  client: ApolloClient<object>;
+  client?: ApolloClient<object>;
 }
 
 const SuspenseCompat = ({ children }: SuspenseProps) => <>{children}</>;
 
 function TasksWrapper({ client, ...props }: TasksWrapperProps) {
   const SuspenseComponent = props.suspend !== false ? Suspense : SuspenseCompat;
 
-  return (
-    <ApolloProvider client={client}>
-      <SuspenseComponent fallback={<>Loading with suspense</>}>
-        <Tasks {...props} />
-      </SuspenseComponent>
-    </ApolloProvider>
+  const inner = (
+    <SuspenseComponent fallback={<>Loading with suspense</>}>
+      <Tasks {...props} />
+    </SuspenseComponent>
   );
+
+  if (client) {
+    return <ApolloProvider client={client}>{inner}</ApolloProvider>;
+  }
+
+  return inner;
 }
 
 afterEach(cleanup);
@@ -180,6 +184,37 @@ it('should return the query data', async () => {
 `);
 });
 
+it('should accept a client option', async () => {
+  const client = createMockClient();
+  const { container } = render(
+    <TasksWrapper query={TASKS_QUERY} client={client} />
+  );
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  Loading without suspense
+</div>
+`);
+
+  await wait();
+
+  expect(container).toMatchInlineSnapshot(`
+<div>
+  <ul>
+    <li>
+      Learn GraphQL
+    </li>
+    <li>
+      Learn React
+    </li>
+    <li>
+      Learn Apollo
+    </li>
+  </ul>
+</div>
+`);
+});
+
 it('should work with suspense enabled', async () => {
   const client = createMockClient();
   const { container } = render(

src/useMutation.ts

@@ -1,5 +1,8 @@
 import { DataProxy } from 'apollo-cache';
-import { MutationOptions, OperationVariables } from 'apollo-client';
+import ApolloClient, {
+  MutationOptions,
+  OperationVariables,
+} from 'apollo-client';
 import { FetchResult } from 'apollo-link';
 import { DocumentNode } from 'graphql';
 
@@ -15,20 +18,32 @@ export type MutationUpdaterFn<TData = Record<string, any>> = (
 // hook because we want them to use our custom parametrized version
 // of `FetchResult` type. Please look at
 // https://github.com/trojanowski/react-apollo-hooks/issues/25
-export interface MutationHookOptions<TData, TVariables>
+export interface BaseMutationHookOptions<TData, TVariables>
   extends Omit<MutationOptions<TData, TVariables>, 'mutation' | 'update'> {
   update?: MutationUpdaterFn<TData>;
 }
 
+export interface MutationHookOptions<TData, TVariables, TCache = object>
+  extends BaseMutationHookOptions<TData, TVariables> {
+  client?: ApolloClient<TCache>;
+}
+
 export type MutationFn<TData, TVariables> = (
-  options?: MutationHookOptions<TData, TVariables>
+  options?: BaseMutationHookOptions<TData, TVariables>
 ) => Promise<FetchResult<TData>>;
 
-export function useMutation<TData, TVariables = OperationVariables>(
+export function useMutation<
+  TData,
+  TVariables = OperationVariables,
+  TCache = object
+>(
   mutation: DocumentNode,
-  baseOptions?: MutationHookOptions<TData, TVariables>
+  {
+    client: overrideClient,
+    ...baseOptions
+  }: MutationHookOptions<TData, TVariables, TCache> = {}
 ): MutationFn<TData, TVariables> {
-  const client = useApolloClient();
+  const client = useApolloClient(overrideClient);
 
   return options => client.mutate({ mutation, ...baseOptions, ...options });
 }

src/useQuery.ts

@@ -1,4 +1,4 @@
-import {
+import ApolloClient, {
   ApolloCurrentResult,
   ApolloError,
   ApolloQueryResult,
@@ -32,12 +32,13 @@ export interface QueryHookState<TData>
   networkStatus: NetworkStatus | undefined;
 }
 
-export interface QueryHookOptions<TVariables>
+export interface QueryHookOptions<TVariables, TCache = object>
   extends Omit<QueryOptions<TVariables>, 'query'> {
   // watch query options from apollo client
   notifyOnNetworkStatusChange?: boolean;
   pollInterval?: number;
   // custom options of `useQuery` hook
+  client?: ApolloClient<TCache>;
   ssr?: boolean;
   skip?: boolean;
   suspend?: boolean;
@@ -55,7 +56,11 @@ export interface QueryHookResult<TData, TVariables>
   ): Promise<ApolloQueryResult<TData>>;
 }
 
-export function useQuery<TData = any, TVariables = OperationVariables>(
+export function useQuery<
+  TData = any,
+  TVariables = OperationVariables,
+  TCache = object
+>(
   query: DocumentNode,
   {
     // Hook options
@@ -68,15 +73,16 @@ export function useQuery<TData = any, TVariables = OperationVariables>(
     notifyOnNetworkStatusChange = false,
 
     // Apollo client options
+    client: overrideClient,
     context,
     metadata,
     variables,
     fetchPolicy: actualCachePolicy,
     errorPolicy,
     fetchResults,
-  }: QueryHookOptions<TVariables> = {}
+  }: QueryHookOptions<TVariables, TCache> = {}
 ): QueryHookResult<TData, TVariables> {
-  const client = useApolloClient();
+  const client = useApolloClient(overrideClient);
   const ssrManager = useContext(SSRContext);
   const ssrInUse = ssr && ssrManager;
 

src/useSubscription.ts

@@ -20,10 +20,11 @@ export interface OnSubscriptionDataOptions<TData> {
   subscriptionData: SubscriptionHookResult<TData>;
 }
 
-export interface SubscriptionHookOptions<TData, TVariables>
+export interface SubscriptionHookOptions<TData, TVariables, TCache = object>
   extends Omit<SubscriptionOptions<TVariables>, 'query'> {
   skip?: boolean;
   onSubscriptionData?: OnSubscriptionData<TData>;
+  client?: ApolloClient<TCache>;
 }
 
 export interface SubscriptionHookResult<TData> {
@@ -32,14 +33,19 @@ export interface SubscriptionHookResult<TData> {
   loading: boolean;
 }
 
-export function useSubscription<TData = any, TVariables = OperationVariables>(
+export function useSubscription<
+  TData = any,
+  TVariables = OperationVariables,
+  TCache = object
+>(
   query: DocumentNode,
   {
     onSubscriptionData,
+    client: overrideClient,
     ...options
-  }: SubscriptionHookOptions<TData, TVariables> = {}
+  }: SubscriptionHookOptions<TData, TVariables, TCache> = {}
 ): SubscriptionHookResult<TData> {
-  const client = useApolloClient();
+  const client = useApolloClient(overrideClient);
   const onSubscriptionDataRef = useRef<
     OnSubscriptionData<TData> | null | undefined
   >(null);