CODEWITHSUNDEEP
redux-toolkitrtk-query
Ivan
Ivan

Reputation: 31

RTK Query stuck at isFetching

Problem: API call using RTK Query is stuck in isFetching status

I have a component ShowSubscriptions. There's an API call inside. It always goes to same endpoint, but with different parameters in query string, based on component props.

function ShowSubscriptions({ lessonId, isActive }: IShowSubscriptions) {
  const isMobile = useMobile();
  const query = isActive ? { isActive } : { dateTo: { $lte: Date.now() } };

  const { data, isError, isSuccess } = useFindSubscriptionsQuery({
    lesson: lessonId,
    ...query,
  });

  ....

Here is my functions, that returns useFindSubscriptionsQuery hook:

export function injectFind<T>(name: string, tag: any, route: string) {
  const extendedApi = basicApi.injectEndpoints({
    endpoints: (build) => ({
      [name]: build.query<IResponse<Array<T>>, Partial<T> | { [key: string]: any } >({
        query: (query) => ({ url: `${route}/find`, params: { findQuery: JSON.stringify(query) } }),
        providesTags: [tag],
      }),
    }),
  });
  return extendedApi;
}

I have two ShowSubscriptions components on same page. First component renders on page load, second renders after clicking Show expired subscriptions button. user interface

Problem that second component is stuck in isFetching mode. It's always isFetching and never becomes isSuccess, never updates data. This is what i see in console:

  isActive: false // second call with isActive=false prop 
  isFetching: true // remains always true
  isError: false
  isSuccess: false // remains always false

On network tab in browser i see successfull response from server and I can log response using transfromResponse function inside my endpoint query as well

I supposed that it could be a cache problem and based on https://redux-toolkit.js.org/rtk-query/usage/cache-behavior tried to add unique token to query params in different ways (passing string instead of an object to hook, passing token inside query function). But it didn't help as well.

Please, advise what I'm doing wrong and how i can get fetched data in my second component.

Thank you in advance!

Upvotes: 2

Views: 2199

Answers (2)

Lekan Saheed
Lekan Saheed

Reputation: 31

For anyone facing this same issue and does not want to remove their implementation of Date.now() as mentioned by @Ivan, you can just memoize the result.

In my case, I have a combinedString variable, that uses the Date.now() method. So I just memoized the combinedString with react's useMemo() hook.

const userId = useMemo(() => combinedString, [])

then you pass the result to your query, depending on your case.

const getUserQuery = useGetUserQuery(userId, {skip: !userId})

Upvotes: 0

Ivan
Ivan

Reputation: 31

Problem solved. Kudos to @phry

Error was in component, where I've invoked an API call.

function ShowSubscriptions({ lessonId, isActive }: IShowSubscriptions) {
  const isMobile = useMobile();
  const query = isActive ? { isActive } : { dateTo: { $lte: Date.now() } };

  const { data, isError, isSuccess } = useFindSubscriptionsQuery({
    lesson: lessonId,
    ...query,
  });

  ....

Date.now() changed at every component rerender. That lead that query request string passed to changed every time & request stuck in infinite fetching.

Solution: moved timestamp out of component / do not change querystring at every component rerender.

Upvotes: 1

Related Questions