Previously I wrote , this story will cover other details of its use. about RTK Imagine we need to display the same kind of data but from different resources depending on the incoming parameter value. In this case, we will have the component with two hooks that handle requests and receive data. Basically, the representation of API looks like this: export const configApi = baseApi.injectEndpoints({
    endpoints: build => ({
        fetchConfigDetails: build.query<IConfig[], IBaseRequest>({
            query: arg => `/config-details`,
            transformResponse: (x: IResponse<IConfig[]>) => x.result,
            providesTags: ['ConfigDetails'],
        }),
        fetchConfigRunDetails: build.query<IConfig[], IRunRequest>({
            query: arg => `/${arg.id}/config-details`,
            transformResponse: (x: IResponse<IConfig[]>) => x.result,
            providesTags: ['ConfigRunDetails'],
        }),
    }),
    overrideExisting: true,
}); It has two endpoints and the main difference between them is the argument ‘id’, so actually the resources are different. So the cache will be also different, one for and one for . ConfigDetails ConfigRunDetails For the clarification on where hooks take their names, I will provide the next example: export const {
    useFetchConfigDetailsQuery,
    useFetchConfigRunDetailsQuery,
} = configApi; The hook name consists of the prefix ‘use’, the endpoint name , and the postfix of the request’s type (a function that is used to create the endpoint) ‘build.query’ → . fetchConfigDetails useFetchConfigDetailsQuery And these two hooks will be used in one component: const RowResultsDetails: React.FC<IProps> = () => {
    const { id } = useParams<IRouteParams>();

    const fetchDetails = useFetchConfigDetailsQuery(
        { },
        {
            skip: !!id,
            selectFromResult: ({ data, isFetching }) => ({
                isFetching: isFetching,
                data: selectConfigDetails(data),
            }),
        }
    );
    const fetchRunDetails = useFetchConfigRunDetailsQuery(
        { id },
        {
            skip: !id,
            selectFromResult: ({ data, isFetching }) => ({
                isFetching: isFetching,
                data: selectRunConfigDetails(data),
            }),
        }
    );

    const { data, isFetching } = id ? fetchRunDetails : fetchDetails;

    return (
        <div>
            <Section.Title>({data.length})</Section.Title>
            ...
        </div>
    );
} As you may know, hooks in React must have the same order and can’t be inside some ‘if else’ condition. In RTK because of such constraint, there is a special property ‘skip’ direct in the hook second parameter (options). With this option, you can tell RTK to execute or not execute the hook. Additionally, for render optimization, RTK provides the possibility to use reselect library to choose the data that you need in this particular component. In other words, and are selectors to memoize data from the cache. If the request will be invoked and selected data is not changed, nothing will happen in the component. selectConfigDetails selectRunConfigDetails The selector actually has no difference from the store selector except you don’t provide the state to it. const emptyArray = [];

export const selectConfigDetails = createSelector(
    [
        (data?: IConfig[]) => data
    ],
    (data) => data?.filter(c => c.isAvailable) ?? emptyArray
); An important point here is if you are using the same selector for both hooks it will cause redundant rerender. In other words ‘selector’ is unique and remembers the result. For the same selector, there will be two different values in the result. to not rerender the component frequently. As well if you prefer to use the hook to memoize data, in this scenario there needs to be two different usages. Be careful useMemo useMemo

Different

2022 - HackerNoon Contributor of the Year - Api

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Redux

2022 - HackerNoon Contributor of the Year - Typescript

2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Redux

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

More Features of the RTK Query

More Features of the RTK Query

Too Long; Didn't Read

Company Mentioned

Anatolii Kabanov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

More Features of the RTK Query

Too Long; Didn't Read

Company Mentioned

Anatolii Kabanov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES