integrate rtk with react-router loader

[22mahmoud]

Hey Guys,

I'm using the react-router loader with RTK queries. When I perform a mutation that requires invalidation, I need to re-run the loader using useRevalidator from react-router.

The problem is that the loader runs while the invalidatesTags process is still ongoing. I've tried dispatching getRunningQueriesThunk to wait for pending queries to finish, but it returns an empty array even though there are pending queries in the state.

export const loader = ({ dispatch, state }) => ({ params }) => {
  console.log(state.api)
   /*
  {
   ...
   "queries": [{
        "getBook..": {
           "status": "pending",
           "endpointName": "getBook",
            ....
       },
       ....
    }]
  */


  await Promise.all(dispatch(api.util.getRunningQueriesThunk())) // return [] empty array
  
  try {
    const promise = dispatch(endpoint.getBook(...)
    cont response = await promise.unwrap();
    return {
       layoutTitle: response.title
     }
   } finally {
    promise.unsubscribe()
  }
}


export const Page = () => {
  const { data } = useGetBookQuery();
  const [update] = useUpdateBookMutation();
  const revalidator = useRevalidator();

 const handleUpdate = () => {
  await update()
  revalidator.revalidate();
 }

  return (
     <div>
        <button onClick={handleUpdate}> update </button>
    </div>
  )
}