50 setup apollo client for ssr with nextjs (#51)

* build(frontend): install apollo client and simplify environment variables

* fix(frontend): disable apollo caching results

* feat: create example client

* feat: setup graphql codegen and example usage

* docs: 📝 Update docs for graphQL codegen

* refactor(frontend): Make blog use graphql queries with apollo

* refactor: 🗑️ Remove unused code

* fix: 🚑 Fix build issues with nextjs and apollo client

Fixed in the new apollo client alpha. issue tracked here apollographql/apollo-client-nextjs#113

* fix: Fix styling and linting ignore files. Also style with prettier

* docs: 📝 Update docs

* refactor(frontend): Refactor blog article page to use graphQL

* fix: fix lint error

* refactor(frontend): 🔥 remove unused console logs

* fix(frontend): fix undefined attributes error

* fix(frontend): 🐛 try to fix undefined attributes bug

* docs: 📝 Update graphql typegen docs

* fix: 🐛 disable caching while developing

* fix: 🐛 fix undefined error

* fix: 🐛 Fix author avatar image bug

backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json

@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2024-01-26T13:37:41.662Z"
+    "x-generation-date": "2024-01-26T19:22:16.105Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

docs/general-usage.md

@@ -1,11 +1,23 @@
 ### Type generation
 
+###### REST
+
 When updating a schema in Strapi, you have to run `npm run generateTypes` in the root directory to generate the proper types for the frontend.
 
 > This uses Strapi's official [documentation plugin](https://docs.strapi.io/dev-docs/plugins/documentation) to generate documentation matching the [OpenAPI specification](https://swagger.io/specification/). It then uses the [@openapi-typescript](https://www.npmjs.com/package/openapi-typescript) package to generate the typescript types.
 >
 > The generated documentation can be found at [http://localhost:1337/documentation/v1.0.0](http://localhost:1337/documentation/v1.0.0) when running the dev server.
 
+###### GraphQL
+
+If you're using GraphQL, then you need to run `npm run compile` from `/frontend` whenever you update a schema or define a new graphQL request in the code. Make sure to import the correct `gql` as
+
+```
+import { gql } from"@/generated/gql";
+```
+
+> [https://www.apollographql.com/docs/react/development-testing/static-typing/](https://www.apollographql.com/docs/react/development-testing/static-typing/)
+
 ### Strapi First time boot
 
 Goto Settings > Users & Permissions plugin > Roles > Public > Article, and enable `find` and `findOne`

frontend/.env.development

@@ -1,3 +1,2 @@
 # Database API URL
-API_URL=http://localhost:1337/api/
 HOST_URL=http://localhost:1337

frontend/.env.production

@@ -1,3 +1,2 @@
 # Heroku Database API
-API_URL=https://small-sat-lab-6ad3da13947b.herokuapp.com/api/
 HOST_URL=https://small-sat-lab-6ad3da13947b.herokuapp.com

frontend/.eslintrc.json

@@ -1,3 +1,4 @@
 {
-    "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"]
+    "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"],
+    "ignorePatterns": ["src/__generated__/*"]
 }

frontend/.prettierignore

@@ -1,3 +1,6 @@
 # Ignore artifacts:
 build
 coverage
+
+# Ignore graphQL codegen generated types
+src/__generated__/*

frontend/codegen.ts

@@ -0,0 +1,21 @@
+import { CodegenConfig } from "@graphql-codegen/cli";
+
+const HOST_URL = "http://localhost:1337";
+
+const config: CodegenConfig = {
+    schema: HOST_URL + "/graphql",
+    // this assumes that all your source files are in a top-level `src/` directory - you might need to adjust this to your file structure
+    documents: ["src/**/*.{ts,tsx}"],
+    generates: {
+        "./src/__generated__/": {
+            preset: "client",
+            plugins: [],
+            presetConfig: {
+                gqlTagName: "gql",
+            },
+        },
+    },
+    ignoreNoDocuments: true,
+};
+
+export default config;