feat(fe): add apollo vscode ext settings (#1379)

* feat(fe): add apollo vscode ext settings

* feat(fe): add apollo codegen

* fix: ignore generated files for apollo extension

* feat: use useClient hook

* chore: only ban importing gql from apollo/client

* chore: remove unused dockerfile

* chore: upgrade pnpm action

.devcontainer/devcontainer.json

@@ -15,6 +15,7 @@
   "customizations": {
     "vscode": {
       "extensions": [
+        "apollographql.vscode-apollo",
         "bradlc.vscode-tailwindcss",
         "bruno-api-client.bruno",
         "csstools.postcss",

.github/actions/setup-pnpm/action.yml

@@ -10,7 +10,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: pnpm/action-setup@v2
+    - uses: pnpm/action-setup@v3
       with:
         version: latest
     - uses: actions/setup-node@v4

.gitpod.yml

@@ -37,6 +37,7 @@ github:
 
 vscode:
   extensions:
+    - apollographql.vscode-apollo
     - bradlc.vscode-tailwindcss
     - bruno-api-client.bruno
     - csstools.postcss

.prettierignore

@@ -4,6 +4,7 @@ node_modules/
 pnpm-lock.yaml
 .pnpm-store/
 @generated/
+__generated__/
 schema.gql
 collection/
 .next/

.vscode/extensions.json

@@ -1,3 +1,11 @@
 {
-  "recommendations": ["ms-vscode-remote.remote-containers"]
+  // Recommendations for Frontend team, developing without devcontainer
+  "recommendations": [
+    "apollographql.vscode-apollo",
+    "dbaeumer.vscode-eslint",
+    "donjayamanne.githistory",
+    "eamodio.gitlens",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
 }

apollo.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  client: {
+    includes: ['./frontend-client/**/*.ts', './frontend-client/**/*.tsx'],
+    excludes: ['**/__generated__/**'],
+    service: {
+      name: 'codedang-graphql-app',
+      url: 'https://dev.codedang.com/graphql'
+    }
+  }
+}

frontend-client/.eslintrc.js

@@ -22,7 +22,23 @@ module.exports = {
             namedComponents: 'function-declaration'
           }
         ],
-        'func-style': ['off']
+        'func-style': ['off'],
+        'no-restricted-imports': [
+          'error',
+          {
+            name: '@apollo/client',
+            importNames: ['gql'],
+            message: 'Please use @generated instead.'
+          },
+          {
+            name: '@/__generated__',
+            message: 'Please use @generated instead.'
+          },
+          {
+            name: '@/__generated__/graphql',
+            message: 'Please use @generated/graphql instead.'
+          }
+        ]
       }
     }
   ]

frontend-client/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# GraphQL Codegen
+__generated__/

frontend-client/app/admin/_components/ApolloProvider.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { auth } from '@/lib/auth'
+import { adminBaseUrl } from '@/lib/vars'
+import {
+  ApolloClient,
+  ApolloLink,
+  ApolloProvider,
+  InMemoryCache,
+  createHttpLink
+} from '@apollo/client'
+import { setContext } from '@apollo/client/link/context'
+
+interface Props {
+  children: React.ReactNode
+}
+
+export default function ClientApolloProvider({ children }: Props) {
+  const httpLink = createHttpLink({
+    uri: adminBaseUrl
+  })
+  const authLink = setContext(async (_, { headers }) => {
+    const session = await auth()
+    return {
+      headers: {
+        ...headers,
+        authorization: session?.token.accessToken
+      }
+    }
+  })
+  const link = ApolloLink.from([authLink.concat(httpLink)])
+
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    link,
+    defaultContext: {
+      fetchOptions: {
+        next: { revalidate: 0 }
+      }
+    }
+  })
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>
+}

frontend-client/app/admin/layout.tsx

@@ -3,33 +3,36 @@ import { Separator } from '@/components/ui/separator'
 import type { Route } from 'next'
 import Link from 'next/link'
 import { FaArrowRightFromBracket } from 'react-icons/fa6'
+import ClientApolloProvider from './_components/ApolloProvider'
 // import GroupSelect from './_components/GroupSelect'
 import SideBar from './_components/SideBar'
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex h-dvh bg-slate-100">
-      <nav className="flex w-60 flex-col bg-white p-2 pt-8 text-sm font-medium">
-        {/* Todo: Group 기능 추가 시, Public Button 대신 GroupSelect 컴포넌트로 변경 */}
-        {/* <GroupSelect /> */}
-        <Button
-          variant="ghost"
-          className="h-fit justify-between py-2 text-left text-lg font-bold text-slate-800"
-        >
-          Public
-        </Button>
-        <Separator className="my-4 transition" />
-        <SideBar />
-        <Link
-          href={'/' as Route}
-          className="mt-auto rounded px-4 py-2 text-slate-600 transition hover:bg-slate-100"
-        >
-          <FaArrowRightFromBracket className="mr-2 inline-block" />
-          Quit
-        </Link>
-      </nav>
-      <Separator orientation="vertical" />
-      {children}
-    </div>
+    <ClientApolloProvider>
+      <div className="flex h-dvh bg-slate-100">
+        <nav className="flex w-60 flex-col bg-white p-2 pt-8 text-sm font-medium">
+          {/* Todo: Group 기능 추가 시, Public Button 대신 GroupSelect 컴포넌트로 변경 */}
+          {/* <GroupSelect /> */}
+          <Button
+            variant="ghost"
+            className="h-fit justify-between py-2 text-left text-lg font-bold text-slate-800"
+          >
+            Public
+          </Button>
+          <Separator className="my-4 transition" />
+          <SideBar />
+          <Link
+            href={'/' as Route}
+            className="mt-auto rounded px-4 py-2 text-slate-600 transition hover:bg-slate-100"
+          >
+            <FaArrowRightFromBracket className="mr-2 inline-block" />
+            Quit
+          </Link>
+        </nav>
+        <Separator orientation="vertical" />
+        {children}
+      </div>
+    </ClientApolloProvider>
   )
 }