upgrade @apollo/client and add props to GraphQL class

.changeset/empty-clocks-rhyme.md

@@ -0,0 +1,9 @@
+---
+'@shopify/graphql-testing': minor
+'@shopify/react-graphql': minor
+'@shopify/react-graphql-universal-provider': minor
+---
+
+- upgrade @apollo/client to the latest (3.8.10)
+- set `connectToDevTools` to false by default
+- allow consumers to pass `defaultOptions` into the options of

packages/graphql-testing/package.json

@@ -31,13 +31,15 @@
     "node": "^14.17.0 || >=16.0.0"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.8",
     "graphql": ">=14.5.0 <16.0.0",
     "jest-matcher-utils": "^26.6.2"
   },
   "devDependencies": {
     "graphql-typed": "^2.0.2"
   },
+  "peerDependencies": {
+    "@apollo/client": ">=3.5.8 || <4.0.0"
+  },
   "files": [
     "build/",
     "!build/*.tsbuildinfo",

packages/graphql-testing/src/graphql-controller.ts

@@ -1,4 +1,4 @@
-import type {InMemoryCacheConfig} from '@apollo/client';
+import type {DefaultOptions, InMemoryCacheConfig} from '@apollo/client';
 import {ApolloClient, ApolloLink, InMemoryCache} from '@apollo/client';
 
 import {MockLink, InflightLink} from './links';
@@ -9,6 +9,7 @@ import type {GraphQLMock, MockRequest, FindOptions} from './types';
 export interface Options {
   cacheOptions?: InMemoryCacheConfig;
   links?: ApolloLink[];
+  defaultOptions?: DefaultOptions;
 }
 
 interface ResolveAllFindOptions extends FindOptions {
@@ -29,7 +30,7 @@ export class GraphQL {
 
   constructor(
     mock: GraphQLMock = {},
-    {cacheOptions = {}, links = []}: Options = {},
+    {cacheOptions = {}, links = [], defaultOptions = {}}: Options = {},
   ) {
     const cache = new InMemoryCache(cacheOptions);
 
@@ -44,8 +45,10 @@ export class GraphQL {
     ]);
 
     this.client = new ApolloClient({
+      connectToDevTools: false,
       link,
       cache,
+      defaultOptions,
     });
   }
 

packages/react-graphql-universal-provider/package.json

@@ -27,10 +27,10 @@
     "@shopify/react-graphql": "^10.0.3",
     "@shopify/react-hooks": "^3.0.5",
     "@shopify/react-html": "^13.0.6",
-    "@shopify/react-network": "^5.0.15",
-    "@apollo/client": "^3.5.8"
+    "@shopify/react-network": "^5.0.15"
   },
   "peerDependencies": {
+    "@apollo/client": ">=3.5.8 || <4.0.0",
     "react": ">=16.8.0 <19.0.0"
   },
   "devDependencies": {

packages/react-graphql/package.json

@@ -24,7 +24,6 @@
     "node": "^14.17.0 || >=16.0.0"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.8",
     "@shopify/async": "^4.0.3",
     "@shopify/react-async": "^5.3.0",
     "@shopify/react-effect": "^5.0.3",
@@ -46,6 +45,7 @@
     "index.esnext"
   ],
   "peerDependencies": {
+    "@apollo/client": ">=3.5.8 || <4.0.0",
     "react": ">=16.8.0 <19.0.0"
   },
   "module": "index.mjs",

packages/react-graphql/src/Query.tsx

@@ -5,7 +5,8 @@ import type {DocumentNode} from 'graphql-typed';
 import type {QueryHookResult, QueryHookOptions} from './hooks';
 import {useQuery} from './hooks';
 
-interface QueryComponentOptions<Data, Variables> extends QueryHookOptions {
+interface QueryComponentOptions<Data, Variables extends OperationVariables>
+  extends QueryHookOptions {
   children: (result: QueryHookResult<Data, Variables>) => JSX.Element | null;
   query: DocumentNode<Data, Variables>;
 }

packages/react-graphql/src/hooks/query.ts

@@ -254,7 +254,7 @@ export default function useQuery<
   return currentResult;
 }
 
-function createDefaultResult<Variables>(
+function createDefaultResult<Variables extends OperationVariables>(
   client: ApolloClient<unknown>,
   variables: Variables,
   queryObservable?: ObservableQuery,

packages/react-graphql/src/hooks/types.ts

@@ -11,15 +11,18 @@ import type {IfAllNullableKeys} from '@shopify/useful-types';
 
 import type {VariableOptions} from '../types';
 
-export type QueryHookOptions<Data = any, Variables = OperationVariables> = Omit<
+export type QueryHookOptions<
+  Data = any,
+  Variables extends OperationVariables = OperationVariables,
+> = Omit<
   QueryComponentOptions<Data, Variables>,
   'query' | 'partialRefetch' | 'children' | 'variables'
 > &
   VariableOptions<Variables> & {
     skip?: boolean;
   };
 
-export interface QueryHookResult<Data, Variables>
+export interface QueryHookResult<Data, Variables extends OperationVariables>
   extends Omit<
     QueryResult<Data, Variables>,
     'networkStatus' | 'variables' | 'reobserve' | 'observable'

packages/react-graphql/src/types.ts

@@ -32,7 +32,10 @@ export type VariableOptions<Variables> = IfEmptyObject<
   IfAllNullableKeys<Variables, {variables?: Variables}, {variables: Variables}>
 >;
 
-export type QueryProps<Data = any, Variables = OperationVariables> = {
+export type QueryProps<
+  Data = any,
+  Variables extends OperationVariables = OperationVariables,
+> = {
   children: (result: QueryResult<Data, Variables>) => ReactNode;
   fetchPolicy?: WatchQueryFetchPolicy;
   errorPolicy?: ErrorPolicy;
@@ -49,8 +52,11 @@ export type QueryProps<Data = any, Variables = OperationVariables> = {
   onError?: (error: ApolloError) => void;
 } & VariableOptions<Variables>;
 
-export interface AsyncDocumentNode<Data, Variables, DeepPartial>
-  extends GraphQLOperation<Data, Variables, DeepPartial>,
+export interface AsyncDocumentNode<
+  Data,
+  Variables extends OperationVariables,
+  DeepPartial,
+> extends GraphQLOperation<Data, Variables, DeepPartial>,
     AsyncHookTarget<
       DocumentNode<Data, Variables, DeepPartial>,
       {},
@@ -59,8 +65,11 @@ export interface AsyncDocumentNode<Data, Variables, DeepPartial>
         Pick<QueryProps<Data, Variables>, 'pollInterval'>
     > {}
 
-export interface AsyncQueryComponentType<Data, Variables, DeepPartial>
-  extends GraphQLOperation<Data, Variables, DeepPartial>,
+export interface AsyncQueryComponentType<
+  Data,
+  Variables extends OperationVariables,
+  DeepPartial,
+> extends GraphQLOperation<Data, Variables, DeepPartial>,
     AsyncComponentType<
       DocumentNode<Data, Variables, DeepPartial>,
       QueryHookOptions<Data, Variables> &

yarn.lock

@@ -1656,7 +1656,7 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@faker-js/faker@^8.0.0":
+"@faker-js/faker@^8.0.0", "@faker-js/faker@^8.4.0":
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.4.1.tgz#5d5e8aee8fce48f5e189bf730ebd1f758f491451"
   integrity sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==
@@ -5399,9 +5399,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001317:
-  version "1.0.30001341"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz#59590c8ffa8b5939cf4161f00827b8873ad72498"
-  integrity sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==
+  version "1.0.30001589"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001589.tgz"
+  integrity sha512-vNQWS6kI+q6sBlHbh71IIeC+sRwK2N3EDySc/updIGhIee2x5z00J4c1242/5/d6EpEMdOnk/m+6tuk4/tcsqg==
 
 capital-case@^1.0.4:
   version "1.0.4"