graphql-react

Installation

npm install graphql-react react

{"imports": {"extract-files/":"https://unpkg.com/extract-files@13.0.0/","graphql-react/":"https://unpkg.com/graphql-react@20.0.0/","is-plain-obj":"https://unpkg.com/is-plain-obj@4.1.0/index.js","is-plain-obj/":"https://unpkg.com/is-plain-obj@4.1.0/","react":"https://esm.sh/react@18.2.0","react-waterfall-render/":"https://unpkg.com/react-waterfall-render@5.0.0/"  }}

Examples

importuseAutoLoadfrom"graphql-react/useAutoLoad.mjs";importuseCacheEntryfrom"graphql-react/useCacheEntry.mjs";importuseLoadGraphQLfrom"graphql-react/useLoadGraphQL.mjs";importuseWaterfallLoadfrom"graphql-react/useWaterfallLoad.mjs";importReactfrom"react";// The query is just a string; no need to use `gql` from `graphql-tag`. The// special comment before the string allows editor syntax highlighting, Prettier// formatting and linting. The cache system doesn’t require `__typename` or `id`// fields to be queried.constquery=/* GraphQL */`  query ($repoId: ID!) {    repo: node(id: $repoId) {      ... on Repository {        stargazers {          totalCount        }      }    }  }`;exportdefaultfunctionGitHubRepoStars({ repoId}){constcacheKey=`GitHubRepoStars-${repoId}`;constcacheValue=useCacheEntry(cacheKey);// A hook for loading GraphQL is available, but custom hooks for loading non// GraphQL (e.g. fetching from a REST API) can be made.constloadGraphQL=useLoadGraphQL();constload=React.useCallback(()=>// To be DRY, utilize a custom hook for each API your app loads from, e.g.// `useLoadGraphQLGitHub`.loadGraphQL(cacheKey,// Fetch URI."https://api.github.com/graphql",// Fetch options.{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json",Authorization:`Bearer${process.env.GITHUB_ACCESS_TOKEN}`,},body:JSON.stringify({            query,variables:{              repoId,},}),},),[cacheKey,loadGraphQL,repoId],);// This hook automatically keeps the cache entry loaded from when the// component mounts, reloading it if it’s staled or deleted. It also aborts// loading if the arguments change or the component unmounts; very handy for// auto-suggest components!useAutoLoad(cacheKey,load);// Waterfall loading can be used to load data when server side rendering,// enabled automagically by `next-graphql-react`. To learn how this works or// to set it up for a non-Next.js app, see:// https://github.com/jaydenseric/react-waterfall-renderconstisWaterfallLoading=useWaterfallLoad(cacheKey,load);// When waterfall loading it’s efficient to skip rendering, as the app will// re-render once this step of the waterfall has loaded. If more waterfall// loading happens in children, those steps of the waterfall are awaited and// the app re-renders again, and so forth until there’s no more loading for// the final server side render.returnisWaterfallLoading    ?null    :cacheValue      ?cacheValue.errors        ?// Unlike many other GraphQL libraries, detailed loading errors are// cached and can be server side rendered without causing a// server/client HTML mismatch error."Error!"        :cacheValue.data.repo.stargazers.totalCount      :// In this situation no cache value implies loading. Use the// `useLoadingEntry` hook to manage loading in detail."Loading…";}

Requirements

Exports