graphql-react examples
This Deno Ruck web app demonstrates server side rendering and functionality of the npm package graphql-react.
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…
| Country | Australia |
|---|---|
| Emoji | 🇦🇺 |
| Capital | Canberra |
Loading on demand
Here the GitHub GraphQL API is used to query repo metadata, along with API rate limit details…
| Repo | jaydenseric/graphql-react |
|---|---|
| Stars | 718 |
4977 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.
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…