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 '../gqless';

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 '../gqless';

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

useMetaState#

Features#

Example#

`useMetaState`#