Show more info about GQL errors

[vnugent]

What would you like to be able to do? Please describe.
As a developer whenever there's a GraphQL related error in the code the exception is not very clear what the root cause is.

How important is this to you (Please pick one)

• Important

** Suggested Solutions **
Implement a global error handling and log the error with console.log()
https://marcinkwiatkowski.com/blog/graphql/2-ways-of-handling-graphql-errors-in-apollo-client/

[actuallyyun]

hey @vnugent I can try to work on this if it's fine with you.

[actuallyyun]

Thanks for assigning me the issue. I'm on it!

[actuallyyun]

Hi @vnugent The article you shared recommends using ApolloLink to implement application-level error handling, which sits between Graphql server and Apollo Client. We could add a Link to the application, and log Graphql errors. Apollo provided an example using the onError link:

import { ApolloClient, InMemoryCache, HttpLink, from } from "@apollo/client";
import { onError } from "@apollo/client/link/error";

const httpLink = new HttpLink({
  uri: "http://localhost:4000/graphql"
});

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}`);
});

// If you provide a link chain to ApolloClient, you
// don't provide the `uri` option.
const client = new ApolloClient({
  // The `from` function combines an array of individual links
  // into a link chain
  link: from([errorLink, httpLink]),
  cache: new InMemoryCache()
});

So I could first implement the onError link, and then modify Apollo client in Client.ts file.

[actuallyyun]

Hey I wrote the code and tried to commit, but did not pass all the tests. This is the one that failed:

Summary of all failing tests
 FAIL  src/components/editor/__tests__/CsvEditor.tsx (6.239 s)
  ● Inplace CSV editor tests › Simulate a grade change & grade validation

    expect(element).toBeDisabled()

    Received element is not disabled:
      <button type="submit" />

      104 |     screen.queryByText('Please fix formatting errors')
      105 |
    > 106 |     expect(await (screen.findByRole('button', { name: 'Submit' }))).toBeDisabled()
          |                                                                     ^
      107 |
      108 |     await user.type(editor, '{arrowleft>4}{backspace}b') // Change a grade to '5b'
      109 |

      at Object.toBeDisabled (src/components/editor/__tests__/CsvEditor.tsx:106:69)

What should I do with this?

[vnugent]

The failing test has been an issue. You commit with --no-verify to skip the unit tests

1. Run yarn lint and fix errors if any (you can ignore the typescript version warning)
2. commit --no-verify -am "fix: ... <actual commit message>
3. then git push