RTK Query multiple requests inside injectEndpoints/queryFn reusing other endpoints

[panoramix360]

Hello!

I didn't find much documentation about multiple requests with this particular case in mind.

I have an endpoint that will get a list of items, and in each item object, there is an id that I have to use to get complete data for another particular object.

I don't want to chain multiple Query hooks inside the component, so I'm trying to solve it using the queryFn to make multiple requests like the documentation.

I want to reuse an already-defined endpoint in conjunction with the queryFn one.

I have an endpoint called getProfile:

const profileApi = api.injectEndpoints({
  endpoints: builder => ({
    getProfile: builder.query<Profile, number>({
      query: profileId => ({
        path: '/profile-path',
        params: profileId,
      }),
    }),
  }),
})

and now the queryFn endpoint that it's reusing this same endpoint:

const dataApi = api.injectEndpoints({
  endpoints: builder => ({
    getData: builder.query<Data[], number>({
      async queryFn(dataId, queryApi, _extraOptions, fetchWithBQ) {
        const dataResult = await fetchWithBQ({
          path: '/data-path',
          params: dataId,
        })

        if (dataResult.error)
          return { error: dataResult.error as ApiError }

        const dataList = dataResult.data as Data[]

        for (let data of dataList) {
          try {
            data.profile = await queryApi
              .dispatch(
                profileApi.endpoints.getProfile.initiate(
                  data.profileId,
                ),
              )
              .unwrap()
          } catch (error) {
            return { error: error as ApiError }
          }
        }

        return {
          data: dataList,
        }
      },
    }),
  }),
})

This is already working, but I just want some feedback if this is the correct way, or there is a better way to do this.

Thank you for reading!

[phryneas]

Your solution is creating multiple getProfile cache entries in addition to that getData cache entry - that will also contain the same data. If it works, it works - but honestly I would try to not call one endpoint from another.
I'd either have it be all requests or combine multiple hooks into one custom hook.

[panoramix360]

Thank you for your response and point of view 😄

I didn't consider the cache entries, so if I don't reuse and create a new request like this:

const dataApi = api.injectEndpoints({
  endpoints: builder => ({
    getData: builder.query<Data[], number>({
      async queryFn(dataId, queryApi, _extraOptions, fetchWithBQ) {
        const dataResult = await fetchWithBQ({
          path: '/data-path',
          params: dataId,
        })

        if (dataResult.error)
          return { error: dataResult.error as ApiError }

        const dataList = dataResult.data as Data[]

        for (let data of dataList) {
          const result = await fetchWithBQ({
            path: '/profile-path',
            params: data.profileId,
          })

          if (result.error)
            return { error: result.error as ApiError }

          data.profile = result.data as Profile
        }

        return {
          data: dataList,
        }
      },
    }),
  }),
})

The cache will be okay because it will have just the version of this endpoint, right?

When you are saying combine multiple hooks, is it to create a custom hook that will trigger both endpoints and deliver the result?

Is there another way to do this? just out of curiosity.

Thank you!

[phryneas]

Yeah, that is more along the lines of what I do.

As for custom hook, I mean something like

function useMyCombinedQuery(arg) {
  const result1 = useMyFirstQuery(arg)
  const result2 = useMySecondQuery(result1.isSuccess ? result2.data.something : skipToken)
  const data = useMemo(() => { /* do something with result1 and result2*/ }, [result1.data, result2.data])
  return data
}

[panoramix360]

Thank you @phryneas, I think that was a great clarification!