RTK Query isLoading state gets false before data has been fetched

[n-ii-ma]

I have this API that handles getting data from Socket connection:

import { api } from "../../api";
import { createSocketFactory } from "@/services/socket";

import type { Coin } from "@/interfaces/global/coin.types";

export const pricesApi = api.injectEndpoints({
  endpoints: (build) => ({
    getCoinPrices: build.query<Coin[], void>({
      queryFn: () => ({ data: [] }),
      onCacheEntryAdded: async (
        arg,
        { updateCachedData, cacheDataLoaded, cacheEntryRemoved }
      ) => {
        // Create the socket IO instance and start the connection when the cache subscription starts
        const socket = await createSocketFactory();

        try {
          // Wait for the initial query to resolve before proceeding
          await cacheDataLoaded;

          // Listen for price updates
          const listener = (data: Coin[]) => {
            updateCachedData(() => data);
          };

          // Start listening for price updates
          socket.on("prices", listener);
        } catch (error) {}

        // `cacheEntryRemoved` will resolve when the cache subscription is no longer active
        await cacheEntryRemoved;

        // Perform cleanup steps once the `cacheEntryRemoved` promise resolves
        socket.off();
        socket.disconnect();
      },
    }),
  }),
});

export const { useGetCoinPricesQuery } = pricesApi;

In a component when I get the data, the isLoading is set to true but immediately it's set to false before the data has been fetched from the connection. It actually gets false here:

Is this behavior expected? Because I have used the same way of handling Socket connection in another project that used RTK v1.9 and the isLoading would get false after the data was loaded.
How can I track the loading state if this is not an actual issue?

[markerikson]

I'm confused on what you're describing here. Where are you logging the loading values?

[n-ii-ma]

Yeah, it's really weird to me but I guess for this specific use case I'll just have to stick with this and also check for the loading slice's state so that the action of setting it to false doesn't get dispatched every time the data arrives from the socket:

// Listen for price updates
  const listener = (data: Coin[]) => {
    updateCachedData(() => data);

   // Will check if loading slice's state is true before dispatching this action
   ...
    dispatch(setLoading(false));
  };

[phryneas]

I mean generally you have an empty queryFn so it will never stay loading until you get a result from the server - the moment queryFn finishes it will go to loading: false

[n-ii-ma]

So, in here the loading is basically handled locally?

queryFn: () => ({ data: [] })

Taken from comments in the docs:

The query is not relevant here as the data will be provided via streaming updates.
A queryFn returning an empty array is used, with contents being populated via streaming updates below as they are received.

[phryneas]

The query is done (stops loading) once queryFn finishes.
The lifecycle where you do your websocket call exists "outside" of this and has no influence on loading states.

[n-ii-ma]

I see.

Thanks to both of you for helping me.