Trigger a query refresh (invalidate?) from onClick handler

Question

New to react-query. Have a pretty table with a manual refresh button. The parent that owns the table and button row owns the query, and I'm passing a "reload" function down through props, which the onClick (a few levels down) executes:

const MyComponent = () => {
   
   var qKey = ['xyz', foo, bar];
   
   const reload = () => {
        useQueryClient().invalidateQueries(qKey)
   }

   const {isLoading, error, data, isFetching} = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={reload} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )
}

const ActionBar = (props) => {
   const {onRefresh, onClear, onSearch} = props;

   return (
      <Button onClick={ () => onRefresh()}>Refresh</Button>
      /* other stuff */

Getting an error that "reload" is calling a hook but is not a React function component or a customer React hook function.

I suspect this is a useEffect issue but not sure how that fits into the above scenario?

Or Azoulay · Accepted Answer · 2021-12-16 10:32:40Z

6

put const queryClient = useQueryClient(); under MyComponent function,

and call queryClient inside the reload function.

const MyComponent = () => {
   const queryClient = useQueryClient()
   var qKey = ['xyz', foo, bar];
   
   const reload = () => {
        queryClient.invalidateQueries(qKey)
   }

   const {isLoading, error, data, isFetching} = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={reload} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )
}

answered Dec 16, 2021 at 10:32

Or Azoulay

2191 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jan Z Over a year ago

Duh. Thank you. Staring at this for too long I think! Leaving it here in case anyone else has a similar issue.

TkDodo · Accepted Answer · 2021-12-22 12:37:53Z

2

as an alternative to the accepted answer, you could pass down the refetch method returned from useQuery:

   const {isLoading, error, data, isFetching, refetch } = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={refetch} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )

answered Dec 22, 2021 at 12:37

TkDodo

30.4k5 gold badges85 silver badges100 bronze badges

Collectives™ on Stack Overflow

Trigger a query refresh (invalidate?) from onClick handler

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related