Efficient Error Handling in Next.JS with Apollo GraphQL Client

Question

Efficient Error Handling in Next.JS with Apollo GraphQL Client

Although the component successfully renders the error state, an uncaught exception is displayed in the console and a dialogue box appears in the browser. How can expected errors be handled to prevent this behavior?

import { useMutation, gql } from "@apollo/client";
import { useEffect } from "react";

const CONSUME_MAGIC_LINK = gql`
  mutation ConsumeMagicLink($token: String!) {
    consumeMagicLink(token: $token) {
      token
      member {
        id
      }
    }
  }
`;

export default function ConsumeMagicLink({ token }) {
  const [consumeMagicLink, { data, loading, error }] =
    useMutation(CONSUME_MAGIC_LINK);

  console.log("DATA", data, "loading:", loading, "error:", error);

  useEffect(() => {
    try {
      consumeMagicLink({ variables: { token } });
    } catch (e) {
      console.log(e);
    }
  }, []);

  var text = "Link has expired or has been used previously";

  if (data) text = "SUCCESS: REDIRECTING";
  if (loading) text = "Processing";
  if (error) text = "Link has expired or has been used previously";

  return (
    <div>
      <h2>{text}</h2>
    </div>
  );
}

Console Output:

https://i.stack.imgur.com/8NaKc.png

Error Message in Browser:

https://i.stack.imgur.com/Kg7Yt.png

javascript reactjs next.js apollo-client react-apollo

Answer 1

Answer №1

The issue stems from the client, not the mutation itself, so your try-catch block won't be able to catch it. To address this, you can implement error handling on the client side. Here's an example of how to do that:

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const httpLink = new HttpLink({
  uri: "some invalid link"
});

const client = new ApolloClient({
  link:from([httpLink,errorLink]),
  cache: new InMemoryCache()
})

Since you encountered an authorization error, I recommend checking your headers.

For more detailed information and examples using this approach, please refer to: enter link description here

Answer 2

The issue stems from the client, not the mutation itself, so your try-catch block won't be able to catch it. To address this, you can implement error handling on the client side. Here's an example of how to do that:

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const httpLink = new HttpLink({
  uri: "some invalid link"
});

const client = new ApolloClient({
  link:from([httpLink,errorLink]),
  cache: new InMemoryCache()
})

Since you encountered an authorization error, I recommend checking your headers.

For more detailed information and examples using this approach, please refer to: enter link description here

Efficient Error Handling in Next.JS with Apollo GraphQL Client

Answer №1

Similar questions

Sending dynamic data through AJAX to a CodeIgniter controller is a common task that allows for seamless

What could be causing the lack of data with 'react-hook-form'?

Is it possible to configure the async.retry method to retry even upon successful queries, depending on a specific condition?

Creating a dynamic CSS height for a div in Angular CLI V12 with variables

Controlling the access to simpleJWT tokens in Django-React authentication to restrict user permissions

When working in React, I encountered a problem with the for of loop, as it returned an error stating "x is undefined." Although I could easily switch to using a simple for loop, I find the for of loop to

Is there a way to sort search outcomes by a drop-down menu in Next.js?

Ways to transfer the value of a JavaScript variable to a PHP variable

Having trouble printing webpages? Need a useful tutorial on how to print web pages created using jQuery UI, jqGrid, and Zend?

Error due to PlatformLocation's location dependency issue

Choose from a variety of options using Select and Checkbox components, but limit your choices to a maximum selection

Issue encountered when sending information to asmx web service via ajax and displaying the result on an HTML page with a javascript function

Using the React UseEffect Hook allows for value updates to occur within the hook itself, but not within the main

Efficiently transferring time values from dynamically created list items to an input box using JavaScript

How can I implement a redirect back to the previous query page post-authentication in Next.js 13?

Alias destructuring for arrays within nested objects

Nexus and GraphQL: The root typing path for the "context" type is not found

What is the best way to set the Material UI Mini Variant Drawer to automatically open on larger screens?

Tips on when to display the "Email Confirmation" input text box only after updating the old email

Displaying object properties in React and rendering them on the user interface