├── .eslintrc.json
├── Makefile
├── src
├── app
│ ├── favicon.ico
│ ├── client-side
│ │ ├── loading.tsx
│ │ ├── page.tsx
│ │ └── listusers.tsx
│ ├── server-side
│ │ ├── loading.tsx
│ │ └── page.tsx
│ ├── page.tsx
│ ├── layout.tsx
│ └── globals.css
└── lib
│ ├── client.ts
│ └── apollo-wrapper.tsx
├── next.config.js
├── postcss.config.js
├── .gitignore
├── tailwind.config.js
├── public
├── vercel.svg
└── next.svg
├── tsconfig.json
├── package.json
├── README.md
└── pnpm-lock.yaml
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | packages:
2 | pnpm install @apollo/client@alpha @apollo/experimental-nextjs-app-support
3 |
--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wpcodevo/nextjs13-apollo-client/HEAD/src/app/favicon.ico
--------------------------------------------------------------------------------
/src/app/client-side/loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 | return Loading...
;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/server-side/loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 | return Loading...
;
3 | }
4 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 |
4 | module.exports = nextConfig
5 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/src/app/client-side/page.tsx:
--------------------------------------------------------------------------------
1 | import ListUsers from "./listusers";
2 |
3 | export const dynamic = "force-dynamic";
4 |
5 | export default function ClientSide() {
6 | return ;
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | export default function Home() {
4 | return (
5 | <>
6 | Hello, Next.js 13 App Directory!
7 |
8 |
9 | Use Apollo Client inside Client Side Component
10 |
11 |
12 |
13 |
14 | Use Apollo Client inside React Server Component (RSC)
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { ApolloWrapper } from "@/lib/apollo-wrapper";
2 | // import "./globals.css";
3 |
4 | export const metadata = {
5 | title: "Create Next App",
6 | description: "Generated by create next app",
7 | };
8 |
9 | export default function RootLayout({
10 | children,
11 | }: {
12 | children: React.ReactNode;
13 | }) {
14 | return (
15 |
16 |
17 | {children}
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/lib/client.ts:
--------------------------------------------------------------------------------
1 | import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
2 | import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
3 |
4 | const GRAPHQL_ENDPOINT =
5 | process.env.GRAPHQL_ENDPOINT || "https://jsonplaceholder.ir/graphql";
6 |
7 | export const { getClient } = registerApolloClient(() => {
8 | return new ApolloClient({
9 | cache: new InMemoryCache(),
10 | link: new HttpLink({
11 | uri: GRAPHQL_ENDPOINT,
12 | }),
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}',
6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}',
7 | ],
8 | theme: {
9 | extend: {
10 | backgroundImage: {
11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 | 'gradient-conic':
13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 | },
15 | },
16 | },
17 | plugins: [],
18 | }
19 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | }
18 |
19 | body {
20 | color: rgb(var(--foreground-rgb));
21 | background: linear-gradient(
22 | to bottom,
23 | transparent,
24 | rgb(var(--background-end-rgb))
25 | )
26 | rgb(var(--background-start-rgb));
27 | }
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./src/*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs13-apollo-client",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@apollo/client": "3.8.0-alpha.13",
13 | "@apollo/experimental-nextjs-app-support": "^0.1.0",
14 | "@types/node": "20.1.3",
15 | "@types/react": "18.2.6",
16 | "@types/react-dom": "18.2.4",
17 | "autoprefixer": "10.4.14",
18 | "eslint": "8.40.0",
19 | "eslint-config-next": "13.4.2",
20 | "next": "13.4.2",
21 | "postcss": "8.4.23",
22 | "react": "18.2.0",
23 | "react-dom": "18.2.0",
24 | "tailwindcss": "3.3.2",
25 | "typescript": "5.0.4"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # How to Setup and Use Apollo Client in Next.js 13 App Directory
2 |
3 | In this article, you'll discover how to set up and use Apollo Client in the new Next.js 13 app directory. Specifically, you'll learn how to use Apollo Client in both React Server and Client Components.
4 |
5 | 
6 |
7 | ## Topics Covered
8 |
9 | - Bootstrap the Next.js 13 Project
10 | - Use Apollo Client in a React Server Component (RSC)
11 | - Create a Scoped Apollo Client Instance
12 | - Use the Apollo Client Instance in an RSC
13 | - Use Apollo Client in a Client-Side Component (SSR)
14 | - Create the Apollo Client Wrapper
15 | - Add the Apollo Client Wrapper in the Root Layout Component
16 | - Use the Apollo Client in a Client-Side Component
17 | - Render the Client-Side Component in a Server Component
18 | - Create a Loading Component
19 | - Should you use Apollo Client in a Client or Server Component?
20 | - Conclusion
21 |
22 |
23 |
24 | Read the entire article here: [https://codevoweb.com/setup-and-use-apollo-client-in-nextjs-13-app-directory/](https://codevoweb.com/setup-and-use-apollo-client-in-nextjs-13-app-directory/)
25 |
26 |
--------------------------------------------------------------------------------
/src/app/server-side/page.tsx:
--------------------------------------------------------------------------------
1 | import { getClient } from "@/lib/client";
2 | import { gql } from "@apollo/client";
3 | import React from "react";
4 |
5 | export const dynamic = "force-dynamic";
6 |
7 | const query = gql`
8 | query {
9 | users {
10 | id
11 | name
12 | email
13 | }
14 | }
15 | `;
16 |
17 | interface Response {
18 | users: { id: number; name: string; email: string }[];
19 | }
20 |
21 | export default async function ServerSide() {
22 | const data = await getClient().query({
23 | query,
24 | });
25 |
26 | return (
27 |
28 |
35 | {data.data.users.map((user) => (
36 |
40 |
45 |
{user.name}
46 |
47 | ))}
48 |
28 |
{count}
29 |
30 |
36 |
37 |
38 |
39 | {error ? (
40 | Oh no, there was an error
41 | ) : data ? (
42 |
49 | {data?.users.map((user) => (
50 |
54 |
59 |
{user.name}
60 |
61 | ))}
62 |