Skip to main content

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#

Check API Reference

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>
);
}
Last updated on by github-actions[bot]