Normalizing data that contains two entities

[nrl240]

Hello!

I have already incorporated an RTK Query query whose response contains two entities:

{
    authors: { 
        123: { id: 123, name: 'Jane Smith', books: [3, 5] }
    },
    books: { 
        3: { id: 3, title: 'Hello World', authorId: 123 }
    }
}

In the transformResponse callback, I manually normalized the data to be structured as such:

{
    authors: {
        byId: authors,
        allIds: Object.keys(authors),
    },
    books: {
        byId: books,
        allIds: Object.keys(books),
    },
}

... but then I remembered that createEntityAdapter does this and is super charged with so many features; however, can it handle an API response with multiple entities, as mentioned above? Is there a way to inform createEntityAdapter about the structure?

[nrl240]

Attempting to answer my own question, as I throw spaghetti.

This is possible by doing the following:

const authorsAdapter = createEntityAdapter<Author>();
const authorsInitialState = authorsAdapter.getInitialState();
const booksAdapter = createEntityAdapter<Book>();
const booksInitialState = booksAdapter.getInitialState();

and within the transformResponse callback:

transformResponse: (response: AuthorsBooksResponse) => {
        const { authors, books } = response.data;
        // const transformedAuthors = authorsAdapter.setAll(authorsInitialState, Object.values(authors));
        const transformedAuthors = authorsAdapter.setAll(authorsInitialState, authors);
        // const transformedBooks  = booksAdapter.setAll(booksInitialState, Object.values(books));
        const transformedBooks  = booksAdapter.setAll(booksInitialState, books);
        // Update: Saw in the documentation `setAll` can accept objects as well.
        // Reference https://redux-toolkit.js.org/api/createEntityAdapter#crud-functions
        //  "accepts an array of entities or an object in the shape of Record<EntityId, T>"

        return {
            authors: transformedAuthors,
            books: transformedBooks
        }
},

Now just having trouble sorting out TypeScript errors (still learning). Specifically, what type to pass to build.query<HERE>.

Regarding updating the types, I did the following:

import { createEntityAdapter, EntityState } from '@reduxjs/toolkit';

interface TransformedResponse {
    authors: EntityState<Author>;
    books: EntityState<Book>;
}

and within the endpoint:

build.query<TransformedResponse, void>({

As for providesTags, I wound up creating tags.constants.ts:

export enum Tag {
    AUTHOR = 'Author',
    BOOK = 'Book',
}

... and importing them in to use within the emptySliceApi (createApi return)...

tagTypes: [Tag.AUTHOR, Tag.BOOK]

... and in the build.query as such:

providesTags: (transformedResponse) =>
                transformedResponse
                    ? [
                          { type: Tag.AUTHOR, id: 'LIST' },
                          ...transformedResponse.authors.ids.map((id) => ({
                              type: Tag.AUTHOR,
                              id,
                          })),
                          { type: Tag.BOOK, id: 'LIST' },
                          ...transformedResponse.books.ids.map((id) => ({
                              type: Tag.BOOK,
                              id,
                          })),
                      ]
                    : [Tag.AUTHOR, Tag.BOOK],