The Guild LogoThe Guild Monogram

Search docs

Search icon

Products by The Guild

Products

Hive logoHive blurred logo

Hive

Schema Registry for your GraphQL Workflows

Docs

Get Started

Inspecting Client State#

useMetaState#

Hook designed to inspect the React Client state, like error handling and fetching state

Features#

  • Notify start fetching
  • Notify fetching complete
  • Notify on error
  • Notify on retry attempt
  • Filter selections you want to inspect in the specific hook
  • Returns current errors and fetching state

Example#

import { useMetaState } from '../gqty'; function Inspector() { const { isFetching, errors } = useMetaState({ onStartFetching() {}, onDoneFetching() {}, onError({ newError, selections, isLastTry }) {}, onRetry({ retryPromise, selections }) {}, // Optional, if it's not specified, inspects everything filterSelections: [['query', 'helloWorld']], }); return ( <div> {isFetching && <p>Fetching...</p>} {errors && ( <> <p>Errors!</p> <ul> {errors.map((error, key) => { return <li key={key}>{error.message}</li>; })} </ul> </> )} </div> ); }import { useMetaState } from '../gqty'; export function Example() { const { isFetching, errors } = useMetaState({ onError({ newError, isLastTry }) { if (isLastTry) { console.error(newError); } }, }); return ( <div> {isFetching && <p>Fetching...</p>} {errors && ( <> <p>Errors!</p> <ul> {errors.map((error, key) => { return <li key={key}>{error.message}</li>; })} </ul> </> )} </div> ); }