Remove the async logic from the @shopify/react-graphql package

.changeset/olive-brooms-watch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/react-graphql': major
+---
+
+Remove the async logic and the dependency on the @shopify/react-async package and other packages from the @shopify/react-graphql package

packages/react-graphql/README.md

@@ -14,7 +14,7 @@ yarn add @shopify/react-graphql
 
 ## Usage
 
-This library builds on top of [@apollo/client](https://github.com/apollographql/apollo-client). It provides alternatives to many of Apollo’s APIs, including `useQuery` and `useMutation`, to provide seamless and thorough type checking for query components whose types are generated by [`graphql-typescript-definitions`](https://github.com/Shopify/quilt/tree/main/packages/graphql-typescript-definitions). Additionally, it provides techniques for creating asynchronously loaded GraphQL queries that seamlessly interoperate with [`@shopify/react-async`’s](../react-async) `usePreload`, `usePrefetch`, and `useKeepFresh` APIs.
+This library builds on top of [@apollo/client](https://github.com/apollographql/apollo-client). It provides alternatives to many of Apollo’s APIs, including `useQuery` and `useMutation`, to provide seamless and thorough type checking for query components whose types are generated by [`graphql-typescript-definitions`](https://github.com/Shopify/quilt/tree/main/packages/graphql-typescript-definitions).
 
 ### Prerequisites
 
@@ -48,8 +48,7 @@ export function App() {
 
 This hook accepts two arguments:
 
-- first argument, a required query document, or an `AsyncQueryComponent` created from [`createAsyncQueryComponent`](#createasyncquerycomponent), or an async query create with [`createAsyncQuery`](#createasyncquery).
-
+- first argument, a required query document
 - second argument, an optional set of options with the following type definition.
 
 ```ts
@@ -193,109 +192,6 @@ function MyComponent() {
 }
 ```
 
-### Async queries
-
-#### `createAsyncQuery()`
-
-`createAsyncQuery` is used to create a GraphQL document that is only loaded when the query is actually run. This feature of the query makes it well-suited for use with prefetching, as you would otherwise need to include all prefetched GraphQL queries in the main bundle.
-
-To create an async query, call `createAsyncQuery` with a `load` property that asyncronously loads a GraphQL document:
-
-```ts
-import {createAsyncQuery} from '@shopify/react-graphql';
-
-const productDetailsQuery = createAsyncQuery({
-  load: () => import('./graphql/ProductDetailsQuery.graphql'),
-});
-```
-
-The returned value can be used in any of the other APIs of this library that accept a query document. Additionally, this value has `@shopify/react-async`-compatible `usePreload`, `usePrefetch`, and `useKeepFresh` hooks. That means the document can be preloaded, prefetched, or kept fresh (using polling) using the hooks provided by `@shopify/react-async`.
-
-```tsx
-import {usePrefetch} from '@shopify/react-async';
-import {createAsyncQuery, useQuery} from '@shopify/react-graphql';
-
-const myQuery = createAsyncQuery({
-  load: () => import('./graphql/MyQuery.graphql'),
-});
-
-// The result of calling the GraphQL query
-const {data, loading} = useQuery(myQuery);
-
-// A function that will load the query script and run the query immediately
-// when called
-const prefetch = usePrefetch(myQuery);
-```
-
-#### `createAsyncQueryComponent()`
-
-This function uses `createAsyncQuery` with the provided arguments to create an async query, and returns a React component that will run the query when mounted. Like `createAsyncQuery`, the resulting component is strongly type checked, and is fully compatible with the `usePreload`-style hooks from `@shopify/react-async`.
-
-```tsx
-import {createAsyncQueryComponent} from '@shopify/react-graphql';
-
-const ProductDetailsQuery = createAsyncQueryComponent({
-  load: () => import('./graphql/ProductDetailsQuery.graphql'),
-});
-```
-
-This component can now be used just like a regular `Query` component. It accepts all the same props, except that the query (and associated types) are already embedded in it, so those do not need to be provided.
-
-```tsx
-// Assuming the following GraphQL API:
-//
-// type Shop = {
-//   id: String!
-//   name: String!
-// }
-
-// type Query = {
-//   shop: Shop!
-// }
-//
-// and the following query:
-//
-// query MyQuery {
-//   shop { id }
-// }
-
-import {createAsyncQueryComponent} from '@shopify/react-graphql';
-
-const MyQuery = createAsyncQueryComponent({
-  load: () => import('./graphql/MyQuery.graphql'),
-});
-
-// Will complain if you try to pass any variables, because they aren’t needed.
-// Will also complain if you try to reference properties on `data` that are not
-// available.
-<MyQuery>
-  {({data}) => {
-    return data ? <div>{data.shop.id}</div> : null;
-  }}
-</MyQuery>;
-```
-
-As with components created by `createAsyncQuery()`, these queries also have static `usePreload`, `usePrefetch`, and `useKeepFresh` hooks. Like components create with `@shopify/react-async`, these components also have static `Preload`,`Prefetch`, and`KeepFresh` components.
-
-```tsx
-import {usePrefetch} from '@shopify/react-async';
-import {createAsyncQueryComponent} from '@shopify/react-graphql';
-
-const MyQuery = createAsyncQueryComponent({
-  load: () => import('./graphql/MyQuery.graphql'),
-});
-
-// Loads the query script when the browser is idle
-<MyQuery.Preload />
-
-// Loads the query script when the browser is idle, and starts polling the query
-<MyQuery.KeepFresh pollInterval={20_000} />
-
-// A function that will load the query script and run the query immediately
-// when called
-const prefetch = usePrefetch(MyQuery);
-```
-
 ### Components
 
 #### `Query`

packages/react-graphql/package.json

@@ -25,11 +25,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.8",
-    "@shopify/async": "^4.0.3",
-    "@shopify/react-async": "^5.2.3",
     "@shopify/react-effect": "^5.0.3",
-    "@shopify/react-hooks": "^3.0.5",
-    "@shopify/react-idle": "^3.1.2",
     "@shopify/useful-types": "^5.1.2",
     "graphql-typed": "^2.0.2",
     "fast-deep-equal": "^3.1.3"