apps/web: support graphql

apps/web/apollo.config.js

@@ -0,0 +1,11 @@
+/* eslint-disable no-undef */
+module.exports = {
+  client: {
+    excludes: ['**/graphql/**/schema.graphql'],
+    includes: ['**/app/**/*', '**/graphql/**/query.graphql'],
+    service: {
+      name: 'strapi',
+      url: 'http://localhost:1337/graphql',
+    },
+  },
+};

apps/web/eslint.config.js

@@ -2,4 +2,10 @@ import { nextJsConfig } from '@repo/eslint-config/next-js';
 import { tailwindConfig } from '@repo/eslint-config/tailwind';
 
 /** @type {import("eslint").Linter.Config} */
-export default [...nextJsConfig, ...tailwindConfig];
+export default [
+  ...nextJsConfig,
+  ...tailwindConfig,
+  {
+    ignores: ['**/graphql/types.ts', '**/schema.graphql'],
+  },
+];

apps/web/graphql.config.cjs

@@ -0,0 +1,16 @@
+/** @type {import('@graphql-codegen/cli').CodegenConfig} */
+module.exports = {
+  documents: './graphql/!(schema).graphql',
+  generates: {
+    './graphql/types.ts': {
+      config: {
+        avoidOptionals: true,
+        onlyOperationTypes: true,
+        useTypeImports: true,
+      },
+      plugins: ['typescript', 'typescript-operations', 'typed-document-node'],
+    },
+  },
+  overwrite: true,
+  schema: 'http://localhost:1337/graphql',
+};

apps/web/package.json

@@ -9,15 +9,23 @@
     "start": "next start",
     "lint": "next lint",
     "check-types": "tsc --noEmit",
-    "lint-staged": "lint-staged"
+    "lint-staged": "lint-staged",
+    "graphql:codegen": "graphql-codegen --config graphql.config.cjs"
   },
   "dependencies": {
+    "@apollo/client": "^3.12.2",
     "@repo/ui": "workspace:*",
+    "graphql": "^16.9.0",
     "next": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "5.0.3",
+    "@graphql-codegen/typed-document-node": "^5.0.12",
+    "@graphql-codegen/typescript": "^4.1.2",
+    "@graphql-codegen/typescript-operations": "^4.4.0",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@repo/eslint-config": "workspace:*",
     "@repo/lint-staged-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",

package.json

@@ -7,7 +7,8 @@
     "lint": "turbo lint -- --fix --max-warnings 0",
     "format": "prettier  --end-of-line lf --write \"**/*.{ts,tsx,md,mjs}\"",
     "prepare": "husky",
-    "lint-staged": "turbo lint-staged"
+    "lint-staged": "turbo lint-staged",
+    "graphql:codegen": "turbo graphql:codegen"
   },
   "devDependencies": {
     "husky": "catalog:",

turbo.json

@@ -19,6 +19,9 @@
     },
     "lint-staged": {
       "cache": false
+    },
+    "graphql:codegen": {
+      "cache": false
     }
   }
 }