One of the strengths of GraphQL is enforcing data types on runtime. Further, TypeScript and GraphQL Code Generator (graphql-codegen) make it safer by typing data statically, so you can write truly type-protected code with rich IDE assists.
This template extends Apollo Server and Client Example by rewriting in TypeScript and integrating graphql-let, which runs TypeScript React Apollo in graphql-codegen under the hood. It enhances the typed GraphQL use as below.
import { useNewsQuery } from './news.graphql'
const News: React.FC = () => {
// Typed already️⚡️
const { data: { news } } = useNewsQuery()
if (news) <div>{news.map(...)}</div>
}
Deploy the example using Vercel:
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-typescript-graphql with-typescript-graphql-app
# or
yarn create next-app --example with-typescript-graphql with-typescript-graphql-app
Download the example:
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typescript-graphql
cd with-typescript-graphql
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with Vercel (Documentation).
By default **/*.graphqls
is recognized as GraphQL schema and **/*.graphql
as GraphQL documents. If you prefer the other extensions, make sure the settings of the webpack loader in next.config.js
and .graphql-let.yml
are consistent.
Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render). https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree