Feat/graphql: Integrate Apollo Client with Server Components (#17)

* Feat: Add Apollo Client integration with CustomApolloProvider

- Install cookie handling library

* Feat: Replace session storage with cookie management for authentication

* Chore: Change fake api endpoint

* Feat: Add graphql client page

* Feat: Add support for graphql file upload

* Chore: Change page uri

* Feat: Create apollo server client

* Docs: Add graphql related explanation

* Feat: Add landpad detail page to show how to use apollo client in server

* Feat: Add landpad detail test file

* Fix: Handle fetch failed error occurred when during github actions

- ref: vercel/next.js#44062 (comment)

Author: Ho-s

README.md

@@ -1,6 +1,6 @@
-# NextJS-App-Router-All-In-One
+# NextJS15-GraphQL-Boilerplate
 
-`Next15 + App router` boilerplate
+`Next15 + GraphQL` boilerplate
 
 ## How to use
 
@@ -65,6 +65,16 @@ $ yarn g
 
 [You can check detail here](./.github/workflows/pull-request-build-check.yml)
 
+### GraphQL
+
+#### Apollo client with [experimental-nextjs-app-support](https://www.npmjs.com/package/@apollo/experimental-nextjs-app-support)
+
+You can see client apollo provider [here](./src/providers/CustomApolloProvider.tsx)
+
+YOu can see server apollo client [here](./src/graphql/apolloServerClient.ts)
+
+#### Graphql upload with [apollo-upload-client](apollo-upload-client)
+
 ### Folder Structure
 
 ```bash
@@ -82,6 +92,7 @@ $ yarn g
 │   ├── assets # Static assets like images, fonts, etc.
 │   ├── components # Reusable React components
 │   ├── constant # Constants used throughout the application
+│   ├── graphql # Graphql related files like apollo client
 │   ├── hooks # Custom React hooks
 │   ├── libs # Library files and utilities
 │   ├── provider # Context providers for global state management
@@ -112,4 +123,4 @@ $ yarn g
 - [x] Jest(with server component)
 - [x] Storybook(with server component)
 - [x] Generator
-- [ ] GraphQL
+- [x] GraphQL

package.json

@@ -22,6 +22,11 @@
     "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\""
   },
   "dependencies": {
+    "@apollo/client": "^3.12.4",
+    "@apollo/experimental-nextjs-app-support": "^0.11.7",
+    "apollo-upload-client": "^18.0.1",
+    "cookies-next": "^5.0.2",
+    "graphql": "^16.10.0",
     "next": "15.1.0",
     "react": "^19",
     "react-dom": "^19",
@@ -43,6 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/apollo-upload-client": "^18.0.0",
     "@types/jest": "^29.5.14",
     "@types/node": "^22",
     "@types/react": "^19",

src/app/cars/page.tsx

@@ -2,6 +2,8 @@ import 'server-only';
 
 import Cars from '~/components/Cars';
 
+export const dynamic = 'force-dynamic';
+
 export default async function CarsPage(...props: any) {
   return <Cars latency={4000} />;
 }

src/app/landpads/[id]/loading.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+const LandpadLoading = () => {
+  return <div>Loading</div>;
+};
+
+export default LandpadLoading;

src/app/landpads/[id]/page-ui.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Landpad } from '../page-ui';
+import { LandpadIdPageStyled } from './styled';
+
+interface LandpadIdUIPageProps {
+  data: Landpad;
+}
+
+const LandpadsIdUIPage = ({ data }: LandpadIdUIPageProps) => {
+  return (
+    <LandpadIdPageStyled>
+      <h1>{data.full_name}</h1>
+      <p>{data.details}</p>
+      <p className="status">{data.status}</p>
+      <Link href={data.wikipedia} target="_blank">
+        {data.wikipedia}
+      </Link>
+      <Link href={'/landpads'}>
+        <p>Go to landpads page</p>
+      </Link>
+    </LandpadIdPageStyled>
+  );
+};
+
+export default LandpadsIdUIPage;

src/app/landpads/[id]/page.test.tsx

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react';
+
+import { apolloServerClient } from '~/graphql/apolloServerClient';
+import { GET_ONE_LANDPAD } from '~/graphql/query/landpad';
+
+import LandpadsIdpage from './page';
+
+jest.mock('../../../graphql/apolloServerClient', () => ({
+  apolloServerClient: jest.fn(),
+}));
+
+describe('LandpadDetailPage', () => {
+  it('should call useQuery with correct variables', async () => {
+    const response = {
+      attempted_landings: null,
+      details: 'details',
+      full_name: 'full_name',
+      id: 'id',
+      landing_type: null,
+      location: { latitude: 0, longitude: 0, name: 'name', region: 'region' },
+      status: 'status',
+      successful_landings: null,
+      wikipedia: 'wikipedia',
+    };
+
+    const mockClient = {
+      query: jest.fn().mockResolvedValue({ data: { landpad: response } }),
+    };
+    (apolloServerClient as jest.Mock).mockResolvedValue(mockClient);
+
+    const params = { id: '1' };
+
+    render(await LandpadsIdpage({ params: Promise.resolve(params) }));
+
+    expect(mockClient.query).toHaveBeenCalledWith({
+      query: GET_ONE_LANDPAD,
+      variables: params,
+    });
+  });
+});

src/app/landpads/[id]/page.tsx

@@ -0,0 +1,21 @@
+import 'server-only';
+
+import { apolloServerClient } from '~/graphql/apolloServerClient';
+import { GET_ONE_LANDPAD } from '~/graphql/query/landpad';
+
+import { Landpad } from '../page-ui';
+import LandpadsIdUIPage from './page-ui';
+
+const LandpadsIdpage = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params;
+
+  const client = await apolloServerClient();
+  const { data } = await client.query<{ landpad: Landpad }, { id: string }>({
+    query: GET_ONE_LANDPAD,
+    variables: { id },
+  });
+
+  return <LandpadsIdUIPage data={data.landpad} />;
+};
+
+export default LandpadsIdpage;

src/app/landpads/[id]/styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const LandpadIdPageStyled = styled.div``;

src/app/landpads/page-ui.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+
+import LandpadsUIPage from './page-ui';
+
+describe('LandpadsUIPage', () => {
+  it('should display loading indicator when loading is true', () => {
+    render(<LandpadsUIPage data={undefined} loading={true} />);
+
+    expect(screen.getByText('loading')).toBeInTheDocument();
+  });
+
+  it('should render landpad data when loading is false', () => {
+    const data = [
+      {
+        attempted_landings: null,
+        details: 'Landing site details',
+        full_name: 'Landing Pad 1',
+        id: '1',
+        landing_type: null,
+        location: { latitude: 0, longitude: 0, name: 'Location 1', region: 'Region 1' },
+        status: 'Active',
+        successful_landings: null,
+        wikipedia: 'https://wikipedia.org',
+      },
+    ];
+
+    render(<LandpadsUIPage data={data} loading={false} />);
+
+    expect(screen.getByText('Landing Pad 1')).toBeInTheDocument();
+    expect(screen.getByText('Landing site details')).toBeInTheDocument();
+    expect(screen.getByText('Active')).toBeInTheDocument();
+    expect(screen.getByText('https://wikipedia.org')).toBeInTheDocument();
+  });
+});

src/app/landpads/page-ui.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import Link from 'next/link';
+
+import { LandpadsLoadingStyled, LandpadsPageStyled } from './styled';
+
+export interface Landpad {
+  attempted_landings: string | null;
+  details: string;
+  full_name: string;
+  id: string;
+  landing_type: string | null;
+  location: { latitude: number; longitude: number; name: string; region: string } | null;
+  status: string;
+  successful_landings: string | null;
+  wikipedia: string;
+}
+
+interface LandpadsUIPageProps {
+  data: Landpad[] | undefined;
+  loading: boolean;
+}
+
+const LandpadsUIPage = ({ data, loading }: LandpadsUIPageProps) => {
+  if (loading) return <LandpadsLoadingStyled>loading</LandpadsLoadingStyled>;
+
+  return (
+    <LandpadsPageStyled>
+      {data?.map(v => (
+        <Link key={v.id} href={`/landpads/${v.id}`}>
+          <h1>{v.full_name}</h1>
+          <p>{v.details}</p>
+          <p className="status">{v.status}</p>
+          <p
+            onClick={e => {
+              e.preventDefault();
+              window.open(v.wikipedia);
+            }}
+          >
+            {v.wikipedia}
+          </p>
+        </Link>
+      ))}
+    </LandpadsPageStyled>
+  );
+};
+
+export default LandpadsUIPage;