Migrate to Apollo Client 3.0

[ggwadera]

All the Apollo Client packages have been merged into a single one for version 3. This means that all the packages we use from Apollo are now included within @apollo/client. Fortunately, they have published a migration guide, where it says that there have been breaking changes from version 2. While there's a chance that nothing breaks on our end, I opted to leave this update out of the previous updates PR (#464) because it may involve a little more work.

On this same subject, I noticed we use next-with-apollo to provide a HOC for our components. While this is useful, it might also be not necessary, as I found this example with Apollo from Vercel where Next is integrated with a GraphQL back-end using the Apollo client.

To do

• Remove all current Apollo client packages
• Install only @apollo/client
• Update all the Apollo client imports
• Check if there's breaking changes (tests, type-check, check everything on localhost, etc...)
  • Tests
  • Type-check
  • Check app on localhost to see if it's working correctly
  • This includes checking if next-with-apollo is working correctly, as there is an open issue about supporting Apollo Client v3.
• If something breaks, fix it

[Ulisseus]

I guess we're lucky since nothing broke on our end, I just updated all files with the given transform. I believe only index.tsx needed one small fix.
App is working locally, I can login as newbie/admin and view curriculum. I can submit challenges and review them.
Some tests are broken though. Transform doesn't update mocks so you need to change -jest.mock('@apollo/react-hooks') to +jest.mock('@apollo/client'). __tests__/pages/[lesson].test.js complains about type error.

[ggwadera]

Good to know that nothing major breaks :)

The type errors may come from the next-with-apollo HOC, as it's mentioned in the linked issue. I believe there's nothing more we can do there besides ignoring them with // @ts-ignore.

The other choice is going without next-with-apollo as shown in the example from Vercel.

[Ulisseus]

Turns out these errors came from ChallengeMaterial component:

 const challengesWithSubmissionData: ChallengeSubmissionData[] = challenges
    .sort((a, b) => a.order - b.order)
    .map((challenge: Challenge) => {
      const submission = userSubmissionsObject[challenge.id] || {}
      return {
        ...challenge,
        status: submission.status || 'unsubmitted',
        submission
      }
    })

I am not sure why it didn't cause problems before but creating copy of challenges before sort-mapping prevented these errors.
next-with-apollo actually works fine despite not being updated for newer apollo client. Except for types of course but I was forced to use @ts-ignore only once so it should be fine.
Should I open a new PR?

[ggwadera]

Should I open a new PR?

Sure, go ahead and open one! We can work out the issues then.