use-rtk-query

React hook wrapper for RTK Query with dynamic queries, caching, and auto refetch.

Installation

npm install use-rtk-query

Usage

import { useRTKQuery } from "use-rtk-query";

function MyComponent({ id }) {
  const fetchUser = (id) => fetch(`/api/user/${id}`).then((res) => res.json());

  const { data, isLoading, isError, refetch } = useRTKQuery(fetchUser, [id], {
    cacheTime: 120,
    refetchOnFocus: true,
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error occurred</p>;

  return <div>{JSON.stringify(data)}</div>;
}

import { rtkApi } from "use-rtk-query";

export const store = configureStore({
  reducer: {
    [rtkApi.reducerPath]: rtkApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(rtkApi.middleware),
});