Four ways to fetch data from the GitHub GraphQL API in Next.js

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Scout APM - Truly a developer’s best friend
  • Zigi - Delete the most useless function ever: context switching.
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • github-graphql-nextjs-example

    A Next.js demo fetches data four ways from the GitHub GraphQL API

    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.

  • tokens

    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:

  • Scout APM

    Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.

  • graphql-request

    Minimal GraphQL client supporting Node and browsers for scripts or simple apps

    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.

  • SWR

    React Hooks for Data Fetching

    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.

  • react-relay

    Relay is a JavaScript framework for building data-driven React applications.

    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:

  • Zigi

    Delete the most useless function ever: context switching.. Zigi monitors Jira and GitHub updates, pings you when PRs need approval and lets you take fast actions - all directly from Slack! Plus it reduces cycle time by up to 75%.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts