En este tutorial aprenderas a crear un Frontend de Nextjs que usa Graphql para comunicarse con un backend.
Creación de Proyecto Nextjs
npx create-next-app nextjs-graphql-setup
√ Would you like to use TypeScript? Yes
√ Would you like to use ESLint? Yes
√ Would you like to use Tailwind CSS? Yes
√ Would you like to use `src/` directory? Yes
√ Would you like to use App Router? (recommended) Yes
√ Would you like to customize the default import alias (@/*)? ... No
npm install @apollo/client@rc @apollo/experimental-nextjs-app-support
Crea un archivo en src/lib/client.js
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
export const { getClient } = registerApolloClient(() => {
return new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
// https://studio.apollographql.com/public/spacex-l4uc6p/
uri: "https://rickandmortyapi.com/graphql",
// you can disable result caching here if you want to
// (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
// fetchOptions: { cache: "no-store" },
}),
});
});
Crea un archivo en lib/apollo-wrapper.js ApolloWrapper:
"use client";
import { ApolloLink, HttpLink } from "@apollo/client";
import {
ApolloNextAppProvider,
NextSSRInMemoryCache,
SSRMultipartLink,
NextSSRApolloClient,
} from "@apollo/experimental-nextjs-app-support/ssr";
function makeClient() {
const httpLink = new HttpLink({
// https://studio.apollographql.com/public/spacex-l4uc6p/
uri: "https://rickandmortyapi.com/graphql",
});
return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
link:
typeof window === "undefined"
? ApolloLink.from([
new SSRMultipartLink({
stripDefer: true,
}),
httpLink,
])
: httpLink,
});
}
export function ApolloWrapper({ children }) {
return (
<ApolloNextAppProvider makeClient={makeClient}>
{children}
</ApolloNextAppProvider>
);
}
en app/layout.js:
import { Inter } from "next/font/google";
import "./globals.css";
import { ApolloWrapper } from "@/lib/apollo-wrapper";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<ApolloWrapper>{children}</ApolloWrapper>
</body>
</html>
);
}
en src/app/page.js
import { getClient } from "@/lib/client";
import { gql } from "@apollo/client";
async function loadData() {
const query = gql`
query {
characters(page: 2, filter: { name: "rick" }) {
info {
count
}
results {
name
image
}
}
}
`;
const { data } = await getClient().query({ query });
console.log(data);
return data.characters.results;
}
async function HomePage() {
const characters = await loadData();
console.log(characters);
return (
<div className="grid grid-cols-3">
{characters.map((character) => {
return (
<div
className="flex flex-col items-center justify-center"
key={character.name}
>
<img src={character.image} alt={character.name} className="w-1/2" />
<p>{character.name}</p>
</div>
);
})}
</div>
);
}
export default HomePage;
en src/app/client/page.js:
"use client";
export const dynamic = "force-dynamic";
import { gql } from "@apollo/client";
import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
const query = gql`
query {
characters(page: 2, filter: { name: "rick" }) {
info {
count
}
results {
name
image
}
}
}
`;
export default function ClientPage() {
const { data } = useSuspenseQuery(query);
return (
<div className="grid grid-cols-3">
{data.characters.results.map((data, i) => (
<div key={i}>
<h3>{data.name}</h3>
<img src={data.image} alt={data.name} />
</div>
))}
</div>
);
}
Instalación de Apollo GraphQL
Más Recursos
Esta es una lista mas extensa de otros recursos: