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.
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.
Here the Countries GraphQL API is used to query country data…
Here the GitHub GraphQL API is used to query repo metadata, along with API rate limit details…
4536 GitHub API rate limit points remaining for this 60 min window.
Cache entries can be made stale, triggering reloading.
It’s wise to delete all the cache after a user logs out.
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.
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…