richardhpa/react-query-use-once

React Query Use Once

A extension for react-query to prevent auto refetching of a query.

Background

In a few of my projects, I have ran into a scenario where I don't want a query to refetch by default. This hook includes the query params to prevent the auto refetching from happening. You can use all the usual react-query options and get the same values from the result.
Even though the default refetching isn't happening you can still manually triggering a refetch via the query cache.

Installation

Using npm:

$ npm install react-query-use-once

Example

import { useQueryOnce } from 'react-query-use-once';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  // Retrieve information about Luke Skywalker from Star Wars
  const { isLoading, error, data } = useQueryOnce('repoData', () =>
    fetch('https://swapi.dev/api/people/1/').then(res => res.json())
  );

  if (isLoading) return 'Loading...';

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.birth_year}</p>
      <p>{data.gender}</p>
    </div>
  );
}

React Query Docs

Visit react-query.tanstack.com for docs, guides, API and more

License

react-query is created by Tanner Linsley