migrate to gql-tag-operations-preset (#331)

* chore(deps): update graphqlcodegenerator monorepo

* use gql-tag-operations-preset

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Laurin Quast <laurinquast@googlemail.com>

.gitignore

@@ -118,3 +118,5 @@ dist
 build
 server-build
 uploads
+
+.data

.prettierignore

@@ -0,0 +1 @@
+src/gql

codegen.yml

@@ -1,21 +1,8 @@
 overwrite: true
 schema: "./GraphQLTypeDefinitions.graphql"
-documents: "src/**/*.graphql"
-config:
-  dedupeOperationSuffix: true
+documents:
+  - "src/**/*.tsx"
+  - "!src/gql/**/*"
 generates:
-  src/__generated__/types.ts:
-    plugins:
-      - add:
-          content: "// THIS FILE IS AUTO GENERATED DO NOT MANUALLY EDIT\n/* eslint-disable */"
-      - "typescript"
-  src/:
-    preset: near-operation-file
-    presetConfig:
-      extension: .tsx
-      baseTypesPath: __generated__/types.ts
-    plugins:
-      - add:
-          content: "// THIS FILE IS AUTO GENERATED DO NOT MANUALLY EDIT\n/* eslint-disable */"
-      - "typescript-operations"
-      - "typescript-urql"
+  ./src/gql/:
+    preset: gql-tag-operations-preset

package.json

@@ -23,11 +23,8 @@
     "@emotion/react": "11.4.0",
     "@emotion/styled": "11.3.0",
     "@feedback-fish/react": "1.2.1",
-    "@graphql-codegen/cli": "1.21.8",
-    "@graphql-codegen/near-operation-file-preset": "1.18.6",
-    "@graphql-codegen/typescript": "1.23.0",
-    "@graphql-codegen/typescript-operations": "1.18.4",
-    "@graphql-codegen/typescript-urql": "2.0.11",
+    "@graphql-codegen/cli": "2.0.1",
+    "@graphql-codegen/gql-tag-operations-preset": "1.0.1",
     "@n1ru4l/push-pull-async-iterable-iterator": "3.0.0",
     "@n1ru4l/socket-io-graphql-client": "0.9.5",
     "@testing-library/jest-dom": "5.13.0",

src/App.tsx

@@ -1,12 +1,22 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import * as React from "react";
 import { Box } from "@chakra-ui/react";
-import { useCharacterQueryQuery } from "./CharacterQuery";
+import { gql } from "./gql";
+import { useQuery } from "urql";
 import { isNone, isSome, Maybe } from "./Maybe";
 import { LandingPage } from "./LandingPage";
 import { CharacterEditor } from "./CharacterEditor";
 import { CharacterOverlay } from "./CharacterView";
 
+const CharacterQuery = gql(/* GraphQL */ `
+  query CharacterQuery($characterId: ID!) @live {
+    character(id: $characterId) {
+      id
+      ...CharacterViewFragment
+    }
+  }
+`);
+
 const parseEditHash = (hash: string): Maybe<string> => {
   const result = /edit=(\w*)/.exec(hash);
   if (isNone(result)) {
@@ -95,7 +105,8 @@ export const App = (): React.ReactElement => {
 };
 
 const CharacterRenderer = ({ characterId }: { characterId: string }) => {
-  const [data] = useCharacterQueryQuery({
+  const [data] = useQuery({
+    query: CharacterQuery,
     variables: {
       characterId,
     },

src/CharacterEditor.tsx

@@ -16,26 +16,57 @@ import {
   Popover,
   PopoverTrigger,
   Portal,
-  Spacer,
   Stack,
   Switch,
   Text,
   VStack,
 } from "@chakra-ui/react";
+import { gql } from "./gql";
+import { useMutation, useQuery } from "urql";
 import { AddIcon, MinusIcon } from "@chakra-ui/icons";
 import styled from "@emotion/styled";
 import { HeaderSection, MainSectionContainer } from "./AppShell";
-import { CharacterViewFragment } from "./CharacterViewFragment";
 import { isSome, Maybe } from "./Maybe";
 import { parseIntSafe } from "./number-utilities";
 import { NumPad } from "./NumPad";
 import { ProgressBar } from "./ProgressBar";
 import { FatePoints } from "./FatePointsIndicator";
 import { useResetState } from "./useResetState";
-import { useCharacterEditorQueryQuery } from "./CharacterEditorQuery";
-import { useCreateCharacterMutationMutation } from "./CreateCharacterMutation";
-import { useUpdateCharacterMutationMutation } from "./UpdateCharacterMutation";
 import { OBSInstructions } from "./OBSInstructions";
+import { CreateCharacterMutation } from "./LandingPage";
+
+const CharacterViewFragment = gql(/* GraphQL */ `
+  fragment CharacterViewFragment on Character {
+    id
+    name
+    imageUrl
+    maximumHealth
+    currentHealth
+    hasMana
+    maximumMana
+    currentMana
+    hasFatePoints
+    maximumFatePoints
+    currentFatePoints
+  }
+`);
+
+const CharacterEditorQuery = gql(/* GraphQL */ `
+  query CharacterEditorQuery($editHash: ID!) @live {
+    characterEditor(editHash: $editHash) {
+      __typename
+      ... on Error {
+        reason
+      }
+      ... on CharacterEditorView {
+        character {
+          id
+          ...CharacterViewFragment
+        }
+      }
+    }
+  }
+`);
 
 export const CharacterEditor = (props: {
   editHash: string;
@@ -51,7 +82,8 @@ export const CharacterEditor = (props: {
 };
 
 const Renderer = (props: { editHash: string }) => {
-  const [data] = useCharacterEditorQueryQuery({
+  const [data] = useQuery({
+    query: CharacterEditorQuery,
     variables: {
       editHash: props.editHash,
     },
@@ -71,10 +103,9 @@ const Renderer = (props: { editHash: string }) => {
 };
 
 const CharacterNotFoundView = (): React.ReactElement => {
-  const [
-    createCharacterState,
-    createCharacter,
-  ] = useCreateCharacterMutationMutation();
+  const [createCharacterState, createCharacter] = useMutation(
+    CreateCharacterMutation
+  );
 
   React.useEffect(() => {
     if (
@@ -109,17 +140,27 @@ const CharacterNotFoundView = (): React.ReactElement => {
   );
 };
 
+const UpdateCharacterMutation = gql(/* GraphQL */ `
+  mutation UpdateCharacterMutation($input: UpdateCharacterInput!) {
+    updateCharacter(input: $input)
+  }
+`);
+
 const Editor = ({
   character,
   editHash,
 }: {
-  character: CharacterViewFragment;
+  character: Exclude<
+    typeof CharacterViewFragment["__resultType"],
+    null | undefined
+  >;
   editHash: string;
 }) => {
-  const [, updateCharacter] = useUpdateCharacterMutationMutation();
-  const [imageUrl, setImageUrl] = useResetState(() => character.imageUrl, [
-    character.imageUrl,
-  ]);
+  const [, updateCharacter] = useMutation(UpdateCharacterMutation);
+  const [imageUrl, setImageUrl] = useResetState(
+    () => character.imageUrl,
+    [character.imageUrl]
+  );
   const [name, setName] = useResetState(() => character.name, [character.name]);
   const [currentHealth, setCurrentHealth] = useResetState(
     () => character.currentHealth,
@@ -129,9 +170,10 @@ const Editor = ({
     () => character.maximumHealth,
     [character.maximumHealth]
   );
-  const [hasMana, setHasMana] = useResetState(() => character.hasMana, [
-    character.hasMana,
-  ]);
+  const [hasMana, setHasMana] = useResetState(
+    () => character.hasMana,
+    [character.hasMana]
+  );
   const [currentMana, setCurrentMana] = useResetState(
     () => character.currentMana,
     [character.currentMana]