Migrate from apollo cli to graphql-codegen to fix compatibility issues when generating types

[ericstumper]

apollographql/apollo-tooling#2053

[ericstumper]

ToDos to check whether this new config is feasible for production use

Note: All graphql documents in the new graphql folder are already converted to the graphql-codegen syntax. this allows the codegen to infer fragments and subtypes without explicitly importing them and also allows us to omit the Query and QueryVariable typings in our useQuery and useMutation hooks, Typescript knows these query result types automatically from now on!

• Move all components to new type structure, for example see all components in:
• • /components/pages/CourseContent/UploadAchievementRecord
• Find out whether Fragment Masking is used in the best way possible (usage of useFrament is maybe too verbose or not needed?)
• • See: https://the-guild.dev/graphql/codegen/docs/guides/react-vue
• • Does the result of useFragment have to be cached with useMemo?
• • Verbose import of Fragments seems tedious instead of just importing a type definition: import { ACHIEVEMENT_RECORD_FRAGMENT } from '../../../../graphql/fragments/achievementRecordFragment';
• Test if the app with queries and mutations still runs smoothly
• Check for type error with typescript by starting a build