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, query } 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.user],
  });

  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>
  );
}