To execute the onError
link when the refresh token expires upon refreshing, you can use the HttpLink
from apollo-link-http
and add a custom error handling logic to it.
Here is an example code snippet for the same:
import { ApolloLink, Observable } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
// create an httpLink with your uri
const httpLink = new HttpLink({ uri: YOUR_GRAPHQL_URI });
// define your error handling logic
const handleErrors = ({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.map(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
),
);
}
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
// check if the error contains an "Unauthorized" status code
const unauthorizedError =
networkError &&
networkError.statusCode === 401 &&
networkError.result &&
networkError.result.errors &&
networkError.result.errors.find(
({ message }) => message === 'Unauthorized',
);
// if the error is an "Unauthorized" error, refresh the access token and retry the request
if (unauthorizedError) {
return new Observable(observer => {
// your refresh token async logic here...
// if the refresh token succeeds, retry the request with the new access token
const headers = {
Authorization: `Bearer ${NEW_ACCESS_TOKEN}`,
};
const newHttpLink = httpLink.clone({ headers });
const subscriber = newHttpLink.request(operation).subscribe({
next: observer.next.bind(observer),
error: observer.error.bind(observer),
complete: observer.complete.bind(observer),
});
// unsubscribe function for clearing up if the operation is cancelled
return () => {
if (subscriber) subscriber.unsubscribe();
};
});
}
};
// create the link chain with the error handling logic
const link = ApolloLink.from([
onError(handleErrors),
httpLink,
]);
// create the apollo client with the link chain
const client = new ApolloClient({
link,
cache: new InMemoryCache(),
});
This code utilizes ApolloLink
to chain multiple links together, such as the onError
link and the HttpLink
. Then defines a custom error handling logic in the handleErrors
function that checks for the "Unauthorized" error and refreshes the access token if required. Finally, creates an Apollo client with the defined link chain.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-08-27 11:00:00 +0000
Seen: 11 times
Last updated: Nov 13 '21
How can I make the html anchor link jump further?
How can I redirect to a page located in a different folder using razorpages?
Is it possible to link a single K8s serviceAccount with multiple aws IAM roles?
What is the process to download Aspentech Infoplus 21 using R?
Is it necessary to incorporate <link rel="icon" href="favicon.ico" type="image/x-icon" />?
How can data corruption occur when attempting to change a segment of a link in an Excel file?