From 29720f827745b87016fff3cd2f9eaede2933ad1b Mon Sep 17 00:00:00 2001 From: "John P. Vajda" Date: Wed, 1 Jun 2022 13:19:16 -0600 Subject: [PATCH 1/2] fixes expansion panel --- docs/source/data/error-handling.mdx | 67 +++++++++++++++++------------ 1 file changed, 39 insertions(+), 28 deletions(-) diff --git a/docs/source/data/error-handling.mdx b/docs/source/data/error-handling.mdx index f5517b9947a..ec9f8576c49 100644 --- a/docs/source/data/error-handling.mdx +++ b/docs/source/data/error-handling.mdx @@ -2,8 +2,6 @@ title: Handling operation errors --- -import LinkChain from '../../shared/link-chain.mdx'; - Apollo Client can encounter a variety of errors when executing operations on your GraphQL server. Apollo Client helps you handle these errors according to their type, enabling you to show appropriate information to the user when an error occurs. ## Error types @@ -14,9 +12,9 @@ Executing GraphQL operations on a remote server can result in [GraphQL errors](# These are errors related to the server-side execution of a GraphQL operation. They include: -* **Syntax errors** (e.g., a query was malformed) -* **Validation errors** (e.g., a query included a schema field that doesn't exist) -* **Resolver errors** (e.g., an error occurred while attempting to populate a query field) +- **Syntax errors** (e.g., a query was malformed) +- **Validation errors** (e.g., a query included a schema field that doesn't exist) +- **Resolver errors** (e.g., an error occurred while attempting to populate a query field) If a syntax error or validation error occurs, your server doesn't execute the operation at all because it's invalid. If resolver errors occur, your server can still return [partial data](#partial-data-with-resolver-errors). @@ -42,7 +40,7 @@ If a GraphQL error occurs, your server includes it in the `errors` array of its "exception": { "stacktrace": [ "GraphQLError: Cannot query field \"nonexistentField\" on type \"Query\".", - "...additional lines...", + "...additional lines..." ] } } @@ -62,7 +60,6 @@ If a GraphQL error prevents Apollo Server from executing your operation at all, An operation that produces resolver errors might _also_ return **partial data**. This means that some (but not all) of the data your operation requested is included in your server's response. Apollo Client _ignores_ partial data by default, but you can override this behavior by [setting a GraphQL error policy](#graphql-error-policies). - ### Network errors These are errors encountered while attempting to communicate with your GraphQL server, usually resulting in a `4xx` or `5xx` response status code (and no data). @@ -83,7 +80,7 @@ If a GraphQL operation produces one or more [resolver errors](#graphql-errors), }, "errors": [ { - "message": "Failed to get string!", + "message": "Failed to get string!" // ...additional fields... } ] @@ -94,11 +91,11 @@ By default, Apollo Client throws away partial data and populates [the `error.gra Apollo Client supports the following error policies for an operation: -| Policy | Description | -|--------|-------------| -| `none` | If the response includes GraphQL errors, they are returned on `error.graphQLErrors` and the response `data` is set to `undefined` even if the server returns `data` in its response. This means network errors and GraphQL errors result in a similar response shape. This is the default error policy. | -| `ignore` | `graphQLErrors` are ignored (`error.graphQLErrors` is _not_ populated), and any returned `data` is cached and rendered as if no errors occurred. | -| `all` | Both `data` and `error.graphQLErrors` are populated, enabling you to render both partial results and error information. | +| Policy | Description | +| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `none` | If the response includes GraphQL errors, they are returned on `error.graphQLErrors` and the response `data` is set to `undefined` even if the server returns `data` in its response. This means network errors and GraphQL errors result in a similar response shape. This is the default error policy. | +| `ignore` | `graphQLErrors` are ignored (`error.graphQLErrors` is _not_ populated), and any returned `data` is cached and rendered as if no errors occurred. | +| `all` | Both `data` and `error.graphQLErrors` are populated, enabling you to render both partial results and error information. | ### Setting an error policy @@ -113,15 +110,17 @@ const MY_QUERY = gql` `; function ShowingSomeErrors() { - const { loading, error, data } = useQuery(MY_QUERY, { errorPolicy: 'all' }); + const { loading, error, data } = useQuery(MY_QUERY, { errorPolicy: "all" }); - if (loading) return loading... + if (loading) return loading...; return (

Good: {data.goodField}

-
Bad: {error.graphQLErrors.map(({ message }, i) => (
-        {message}
-      ))}
+      
+        Bad:{" "}
+        {error.graphQLErrors.map(({ message }, i) => (
+          {message}
+        ))}
       
); @@ -138,14 +137,27 @@ As a recommended first step, you can add an [`onError` link](../api/link/apollo- The example below passes the `ApolloClient` constructor a link chain with two links: -* An `onError` link that checks for `graphQLErrors` or a `networkError` in the server's response. It logs the details of whichever error(s) it finds. -* An `HttpLink` that sends each GraphQL operation to your server. - * _This is the chain's [terminating link](../api/link/introduction/#the-terminating-link)._ - +- An `onError` link that checks for `graphQLErrors` or a `networkError` in the server's response. It logs the details of whichever error(s) it finds. +- An `HttpLink` that sends each GraphQL operation to your server. + - _This is the chain's [terminating link](../api/link/introduction/#the-terminating-link)._ - +```tsx +import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client"; +import { RetryLink } from "@apollo/client/link/retry"; + +const directionalLink = new RetryLink().split( + (operation) => operation.getContext().version === 1, + new HttpLink({ uri: "http://localhost:4000/v1/graphql" }), + new HttpLink({ uri: "http://localhost:4000/v2/graphql" }) +); + +const client = new ApolloClient({ + cache: new InMemoryCache(), + link: directionalLink, +}); +``` @@ -153,8 +165,8 @@ The example below passes the `ApolloClient` constructor a link chain with two li Apollo Link helps you retry failed operations that might be resolved by a followup attempt. We recommend different links depending on the type of error that occurred: -* The `onError` link for [GraphQL errors](#on-graphql-errors) -* The `RetryLink` for [network errors](#on-network-errors) +- The `onError` link for [GraphQL errors](#on-graphql-errors) +- The `RetryLink` for [network errors](#on-network-errors) #### On GraphQL errors @@ -169,8 +181,7 @@ onError(({ graphQLErrors, networkError, operation, forward }) => { switch (err.extensions.code) { // Apollo Server sets code to UNAUTHENTICATED // when an AuthenticationError is thrown in a resolver - case 'UNAUTHENTICATED': - + case "UNAUTHENTICATED": // Modify the operation context with a new token const oldHeaders = operation.getContext().headers; operation.setContext({ @@ -212,7 +223,7 @@ onError(({ response, operation }) => { if (operation.operationName === "IgnoreErrorsQuery") { response.errors = null; } -}) +}); ``` ### `onError` link options From ad494cb7f72951fe5b19aecaa1ff8b267f170668 Mon Sep 17 00:00:00 2001 From: "John P. Vajda" Date: Mon, 6 Jun 2022 17:37:18 -0600 Subject: [PATCH 2/2] changed - back to * --- docs/source/data/error-handling.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/source/data/error-handling.mdx b/docs/source/data/error-handling.mdx index ec9f8576c49..fa89b383acf 100644 --- a/docs/source/data/error-handling.mdx +++ b/docs/source/data/error-handling.mdx @@ -12,9 +12,9 @@ Executing GraphQL operations on a remote server can result in [GraphQL errors](# These are errors related to the server-side execution of a GraphQL operation. They include: -- **Syntax errors** (e.g., a query was malformed) -- **Validation errors** (e.g., a query included a schema field that doesn't exist) -- **Resolver errors** (e.g., an error occurred while attempting to populate a query field) +* **Syntax errors** (e.g., a query was malformed) +* **Validation errors** (e.g., a query included a schema field that doesn't exist) +* **Resolver errors** (e.g., an error occurred while attempting to populate a query field) If a syntax error or validation error occurs, your server doesn't execute the operation at all because it's invalid. If resolver errors occur, your server can still return [partial data](#partial-data-with-resolver-errors). @@ -137,9 +137,9 @@ As a recommended first step, you can add an [`onError` link](../api/link/apollo- The example below passes the `ApolloClient` constructor a link chain with two links: -- An `onError` link that checks for `graphQLErrors` or a `networkError` in the server's response. It logs the details of whichever error(s) it finds. -- An `HttpLink` that sends each GraphQL operation to your server. - - _This is the chain's [terminating link](../api/link/introduction/#the-terminating-link)._ +* An `onError` link that checks for `graphQLErrors` or a `networkError` in the server's response. It logs the details of whichever error(s) it finds. +* An `HttpLink` that sends each GraphQL operation to your server. + * _This is the chain's [terminating link](../api/link/introduction/#the-terminating-link)._ @@ -165,8 +165,8 @@ const client = new ApolloClient({ Apollo Link helps you retry failed operations that might be resolved by a followup attempt. We recommend different links depending on the type of error that occurred: -- The `onError` link for [GraphQL errors](#on-graphql-errors) -- The `RetryLink` for [network errors](#on-network-errors) +* The `onError` link for [GraphQL errors](#on-graphql-errors) +* The `RetryLink` for [network errors](#on-network-errors) #### On GraphQL errors