"GraphQL error" text string in error messages

[hwillson]

Migrated from: apollographql/apollo-client#1812

[fgiarritiello]

Can anyone give an update on this task please?

[jakec-dev]

+1. This error message is quite annoying.

[pfarnach]

What's the consensus on the best way forward here? Based on thumbs up in apollographql/apollo-client#1812, it looks like people want to remove the code that prepends "GraphQL error: . Should we also remove the Network error: prepended string for consistency? It seems like if a dev is really interested in distinguishing the two, one option is to configure the onError middleware like in this example. I'm happy to make a PR for this, just say the word.

[ralexandr]

IMO, the best solution will be to implement the ability to format/change error(s) inside apollo-link-error and/or onError middleware. It should be possible to change error message right before passing it to a final handler (onError callback of Query/Mutation) and no other formatting should be applied after changes made by my own code (currently, even if I change error, the annoying “GraphQL Error” prefix will be automatically added before passing error to the query/mutation callback)

[OtacilioN]

I would really enjoy being able to do something like:

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

The actual way to do this makes the code really ugly, I need to replace it in 19 different files.

Why not moving the addition of the "GraphQL error:" on the onError function instead of in the ApolloLink?

[OtacilioN]

@marlonchalegre

[brunocascio]

Any update here?

[williangd]

This error message is quite annoying. Any update here?

[garfiaslopez]

This error message is quite annoying. Any update here? x2

[mattsrobot]

This error message is quite annoying. Any update here? x3

[zachweinberg]

+1

[SachaG]

Here I am stumbling once more upon the issue I originally created two years ago… In a way it's a bit like randomly meeting an old friend in the street!

Also this might help others, but here's a workaround to access the full error object instead of the "composite" one produced by Apollo Client: apollographql/apollo-link#1022 (comment)

[ralphchristianeclipse]

Just created an enhanced function for this.

But if we can do this on the link level it would be better.

const ANNOYING_GRAPHQL_ERROR_HEADER = 'GraphQL error: ';
const removeAnnoyingHeader = error =>
  error && {
    ...error,
    message: error.message.replace(ANNOYING_GRAPHQL_ERROR_HEADER, '')
  };

const useQueryEnhanced = (...options) => {
  const data = useQuery(...options);
  data.error = removeAnnoyingHeader(data.error);
  return data;
};
const useMutationEnhanced = (...options) => {
  const [mutation, { error, ...remaining }, ...remainingResult] = useMutation(
    ...options
  );
  const errorEnhanced = removeAnnoyingHeader(error);
  return [mutation, { ...remaining, error: errorEnhanced }, ...remainingResult];
};

export const AuthProvider = props => {
  const [authenticated, setAuthenticated] = useState(initialAuthData);
  const { client, data: { auth } = {}, refetch } = useQueryEnhanced(AuthQuery);
  const [loginMutation, { loading, error }] = useMutationEnhanced(
    LoginMutation
  );
}

[sebmor]

Any update? This seems to be a very logical suggestion, I can't believe after a more than a year this has barely any sign of being considered.

[zjd2035]

Also looking for this, 👍

[rushairer]

This seems to be a very logical suggestion +1

[slinden2]

Also waiting for a solution.

[erangakm]

+1 Would be nice to have a configurable option for this.

[MiKaminskas]

+1 to everyone

[catherineleung]

+1

[monbo]

+1

[ljukas]

Since people are still posting here looking for solution, look at what @SachaG posted above: Solution

[dunika]

With the original issue being from 2017 I was very optimistic that this would have been resolved. It seems quite trivial to allow users to opt out of the prepended error text.

The situation I find myself in is that I want to show the user the error message thrown from a failed mutation created from the useMutation hook. I am using final-form which relies on the onSubmit throwing an object of a particular shape so that it can be added to the form state.

There is no need to have this prepended text for the end user. There should be a way to opt out of this especially for user facing errors.

I still think apollo-link-error should get the full, unedited prepended errors in all their glory for logging and dev purposes. But maybe there is a way for apollo-link-error to edit the final user facing error message?

[sreevisakh]

👍

[webdevike]

Any updated on this?
this is what I ended up doing but it's still not ideal

catch ({ graphQLErrors }) {
console.log('handle errors', graphQLErrors)}
}

[lizzieshipwreck]

Guys. This issue, along with apollographql/react-apollo#3507 have both been open for some time. This makes me very sad. When will they be merged? Thanks!

[KaneLabs]

If you can not handle simple, consensus maintenance for a tiny feature do not advertise Apollo as production ready.

[tiagowippel]

Assuming that we can send multiple Graphql queries per request, errors could happens in more than one place.. so the correct way to deal with errors (show to users, for example) is using the property graphQLErrors on the err object (wich is an array btw, and do not have the "GraphQL error:" string). This is my understanding...

.catch(err => {
    if (err.networkError) {
        appStore.showError('Erro na requisição.');
    } else {
        err.graphQLErrors.forEach(err => {
            appStore.showError(err.message);
        });
    }
})

[austinChappell]

I had to write this helper to resolve it. It would be great if this could be fixed.

export const extractGQLErrorMessage = (error: ApolloError) => {
  const { 1: errorMessage } = error.message.split('GraphQL error: ');

  return errorMessage;
};

[arvinsim]

Initially thought there was a config to turn this off. As it is, I will be extracting the message using @austinChappell solution

[hwillson]

Implemented in apollographql/apollo-client#3892 and merged. This will be in Apollo Client 3.0. Thanks all!