react-query-use-once

    1.0.0 • Public • Published

    React Query Use Once

    RichardHpa - react-query-use-once stars - react-query-use-once forks - react-query-use-once

    Node.js CI codecov coverage License

    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

    Install

    npm i react-query-use-once

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    4.3 kB

    Total Files

    2

    Last publish

    Collaborators

    • richardhpa