Unhandled Rejection (Error): GraphQL error: Authentication required

Hi there,

I’ve been trying to implement authentication to a project of mine using apollo-client and apollo-server. It is really simple:

1. on app load I fetch the user’s info from a me query
2. if the user isn’t logged in, the server throws an AuthenticationError
3. after login, I refetch the user’s info from the me query, to update the client’s cache
4. on logout, I clear the cache using client.resetStore
5. because of that, my app rerenders and tries to get the user’s info from the me query again
6. the user isn’t logged in, the server throws an AuthenticationError
7. but this time a see huge error screen in my React application

Looking at the dev tools, everything looks fine.

At page load, the user is not logged in. The me query returns null (and an AuthenticationError error)

After login, I get data from the me query

Finally, after logout, the me query returns again null (and an AuthenticationError error)

But this time my client app breaks with this error

I find this a bit weird because the cache at page load and after logout is the same (empty cache). And the server responses are identical, yet the client behaves differently.

My implementation is pretty similar to the one described in the official documentation (using cookies).

Does anybody have an idea why this happens?

[sunhak-hout]

This temporarily helps me avoid the pain of using try, catch block.

const [login, { data, loading, error }] = useLoginMutation({ onError: () => {} });

I hope to see the solution to this problem soon. Thanks for your hard work, Apollo team!

[adildostmohamed]

not sure if this helps but i had a similar issue where throwing a AuthenticationError from Apollo-Server was causing my Apollo-Client react error page to appear due to an unhandled rejection. In my case, I wrapped my mutation in a try catch block and awaited the mutation response and it seemed to work.

IE This leads to an unhandled rejection error:

  const onSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
    e.preventDefault();
    login({ variables: { input: loginFormState } });
  };

This works and allows me to grab the error from the mutation to display on the UI

  const onSubmit = async (e: React.ChangeEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      await login({ variables: { input: loginFormState } });
    } catch (e) {
      console.error(e);
    }
  };