RTKQ API becomes any when returning data derived from another query

[CosmaTrix]

Hi there 👋 ,

I've been trying to create a queryFn that reads data from another query and returns data derived from that "external" data.

Here's an example: I have a getPosts query that returns a list of posts. My backend is missing an endpoint for getting a specific post, so I want to add a getPost query that reads data from getPosts, filters by its arg, and returns a result (or undefined). Something as simple as this.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

interface Post {
  id: string;
  title: string;
  content: string;
}

export const myApi = createApi({
  baseQuery: fetchBaseQuery(),
  endpoints: (build) => ({
    getPosts: build.query<Post[], void>({
      queryFn: async () => {
        return {
          data: [
            { id: "1", title: "Title #1", content: "Lorem ipsum" },
            { id: "2", title: "Title #2", content: "Lorem ipsum" },
            { id: "3", title: "Title #3", content: "Lorem ipsum" },
          ],
        };
      },
    }),
    getPost: build.query<Post, { id: string }>({
      queryFn: async (arg, api) => {
        const getPostsResult = await api.dispatch(
          myApi.endpoints.getPosts.initiate()
        );

        const data = getPostsResult.data?.find((post) => post.id === arg.id);

        return { data };
      },
    }),
  }),
});

The problem is that the entire myApi becomes any when I return the post. However, if I return undefined or hardcode the result, everything is typed as expected. And when myApi is any, everything else in the application is no longer typed.

Alternatively, I can create a custom hook that uses useGetPostsQuery under the hood. But I was wondering if the above could work or if I am doing something wrong. 🙄

Thanks! 🙏

[EskiMojo14]

yes, this creates circular type inference and TS bails out. the easiest way to avoid it is to manually annotate the type for data so it doesn't need to be inferred. const data: Post | undefined =

[EskiMojo14]

though as more general advice, i would recommend looking into selectFromResult rather than creating a whole new endpoint.