graphql-react logo

graphql-react examples

This Next.js web app demonstrates server side rendering and functionality of the graphql-react and next-graphql-react npm packages.

See the source code on GitHub.

Multi API

Multiple GraphQL APIs can be used within an app; notice several are used in the following examples. With custom React hooks for loading, even non GraphQL APIs can be used.

Loading on mount

Here the Countries GraphQL API is used to query country data…

CountryAustralia
Emoji🇦🇺
CapitalCanberra

Loading on demand

Here the GitHub GraphQL API is used to query repo metadata, along with API rate limit details…

Repojaydenseric/graphql-react
Stars622

4998 GitHub API rate limit points remaining for this 60 min window.

Stale cache

Cache entries can be made stale, triggering reloading.

Delete cache

It’s wise to delete all the cache after a user logs out.

Loading abortion

Here the GitHub GraphQL API is used to search GitHub repositories, automatically loading results. Notice that modifying the input aborts the fetch request for unfinished loading.

Search GitHub repos

SSR errors

Unlike many other GraphQL libraries, loading errors are cached and can be server side rendered without causing a server/client HTML mismatch. Here is deliberately invalid GraphQL query…