Our great sponsors
-
github-graphql-nextjs-example
Discontinued A Next.js demo fetches data four ways from the GitHub GraphQL API
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
Those are four ways to render fetched data in Next.js. You can check out the GitHub repository, clone it, use your access token, and take it for a test spin. Or check out the live demo.
Grab an access token first as we will need to be authenticated to make requests. As for defining the scope of your token, I recommend you start with the following:
I mentioned already we can use just about any client want when fetching GraphQL data. Prisma's graphql-request is a simple and lightweight option, and that is what I’ve used here.
We’re using SWR here to fetch. This is a tool by Vercel derived from the stale-while-revalidate HTTP caching directive made popular in RFC 5861. SWR will return cached data (stale), then send the fetch request (revalidate), and finally arrive with updated data.
How does that look in a React application? There are numerous GraphQL clients we can use, Apollo Client, Relay, or urql to mention a few, but to get started we can also use something as simple as the browser’s Fetch API: