Create a new pull request by comparing changes across two branches

docs/source/api/link/introduction.mdx

@@ -335,10 +335,23 @@ This style of link also composes well for customization using a function:
 import { ApolloLink } from '@apollo/client';
 
 const reportErrors = (errorCallback) => new ApolloLink((operation, forward) => {
-  const observable = forward(operation);
-  // errors will be sent to the errorCallback
-  observable.subscribe({ error: errorCallback })
-  return observable;
+  return new Observable((observer) => {
+    const observable = forward(operation);
+    const subscription = observable.subscribe({
+      next(value) {
+        observer.next(value);
+      },
+      error(networkError) {
+        errorCallback({ networkError, operation });
+        observer.error(networkError);
+      },
+      complete() {
+        observer.complete();
+      },
+    });
+
+    return () => subscription.unsubscribe();
+  });
 });
 
 const link = reportErrors(console.error);

docs/source/data/fragments.md

@@ -105,7 +105,7 @@ import { ApolloClient, gql, InMemoryCache } from "@apollo/client";
 import { createFragmentRegistry } from "@apollo/client/cache";
 
 const client = new ApolloClient({
-  uri: "http://localhost:4000/graphql"
+  uri: "http://localhost:4000/graphql",
   cache: new InMemoryCache({
     fragments: createFragmentRegistry(gql`
       fragment ItemFragment on Item {
@@ -148,7 +148,7 @@ import { ApolloClient, gql, InMemoryCache } from "@apollo/client";
 import { createFragmentRegistry } from "@apollo/client/cache";
 
 const client = new ApolloClient({
-  uri: "http://localhost:4000/graphql"
+  uri: "http://localhost:4000/graphql",
   cache: new InMemoryCache({
     fragments: createFragmentRegistry(gql`
       fragment ItemFragment on Item {

docs/source/data/suspense.mdx

@@ -48,6 +48,7 @@ const GET_DOG_QUERY: TypedDocumentNode<Data, Variables> = gql`
       # properly cached.
       id
       name
+      breed
     }
   }
 `;
@@ -121,7 +122,7 @@ function App() {
         onChange={(e) => setSelectedDog(e.target.value)}
       >
         {data.dogs.map(({ id, name }) => (
-          <option key={id} value={id}>{dog.name}</option>
+          <option key={id} value={id}>{name}</option>
         ))}
       </select>
       <Suspense fallback={<div>Loading...</div>}>

docs/source/development-testing/reducing-bundle-size.mdx

@@ -3,7 +3,7 @@ title: Reducing bundle size
 description: Squeeze those last few bytes out of your production build
 ---
 
-Two quick configuration changes can help your reduce your bundle size: turning off Apollo Client's development mode and picking a consistent style for your imports.  
+Two quick configuration changes can help you reduce your bundle size: turning off Apollo Client's development mode and picking a consistent style for your imports.
 Every byte counts in optimizing your app's performance.
 
 ## Turning off development mode

docs/source/performance/babel.md

@@ -8,7 +8,7 @@ To avoid this runtime overhead, you can precompile your queries created with `gr
 
 1. Using [babel-plugin-graphql-tag](#using-babel-plugin-graphql-tag)
 2. Using [graphql-tag.macro](#using-graphql-tagmacro)
-1. Using [ts-transform-graphql-tag](#using-ts-transform-graphql-tag) for Typescript
+1. Using [ts-transform-graphql-tag](#using-ts-transform-graphql-tag) for TypeScript
 
 If you prefer to keep your GraphQL code in separate files (`.graphql` or `.gql`) you can use [babel-plugin-import-graphql](https://github.com/detrohutt/babel-plugin-import-graphql). This plugin still uses `graphql-tag` under the hood, but transparently. You simply `import` your operations/fragments as if each were an export from your GraphQL file. This carries the same precompilation benefits as the above approaches.