feat: migrate to swc plugin instead of babel (#502)

Author: huv1k

.babelrc.js

@@ -5,12 +5,9 @@ const config = {
   generates: {
     './src/lib/graphql/': {
       preset: 'client',
-      presetConfig: {
-        fragmentMasking: true,
-        useTypeImports: true,
-      },
     },
   },
+  hooks: { afterAllFileWrite: ['prettier --write'] },
 }
 
 module.exports = config

.graphqlrc.js

@@ -8,4 +8,12 @@ module.exports = {
   images: {
     domains: ['avatars.githubusercontent.com'],
   },
+  experimental: {
+    swcPlugins: [
+      // [
+      //   '@graphql-codegen/client-preset-swc-plugin',
+      //   { artifactDirectory: './src/lib/graphql/', gqlTagName: 'graphql' },
+      // ],
+    ],
+  },
 }

next.config.js

@@ -36,11 +36,12 @@
   },
   "devDependencies": {
     "@graphql-codegen/cli": "3.3.0",
-    "@graphql-codegen/client-preset": "2.1.1",
+    "@graphql-codegen/client-preset-swc-plugin": "0.1.3",
+    "@graphql-codegen/client-preset": "2.1.0",
     "@types/node": "18.15.12",
     "@types/react": "18.0.37",
-    "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
+    "eslint": "8.38.0",
     "husky": "8.0.3",
     "prettier": "2.8.7",
     "pretty-quick": "3.1.3",

package.json

@@ -10,7 +10,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
  * 3. It does not support dead code elimination, so it will add unused operations.
  *
- * Therefore it is highly recommended to use the babel-plugin for production.
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
   '\n  fragment ViewerFragment on User {\n    name\n    image\n  }\n':
@@ -25,7 +25,7 @@ const documents = {
  *
  * @example
  * ```ts
- * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
  * ```
  *
  * The query argument is unknown!

src/lib/graphql/gql.ts

@@ -96,6 +96,20 @@ export const ViewerQueryDocument = {
         ],
       },
     },
-    ...ViewerFragmentFragmentDoc.definitions,
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'ViewerFragment' },
+      typeCondition: {
+        kind: 'NamedType',
+        name: { kind: 'Name', value: 'User' },
+      },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+          { kind: 'Field', name: { kind: 'Name', value: 'image' } },
+        ],
+      },
+    },
   ],
 } as unknown as DocumentNode<ViewerQueryQuery, ViewerQueryQueryVariables>