(query);
24 |
25 | return (
26 |
27 |
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 |
Loading...
;
3 | }
4 |
--------------------------------------------------------------------------------
/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/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wpcodevo/nextjs13-apollo-client/7aeb3fad504c4e789399ac33f1bb4c13bf19724f/src/app/favicon.ico
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/server-side/loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 | return Loading...
;
3 | }
4 |
--------------------------------------------------------------------------------
/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 |