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

Intercept It: How to Implement Different Logic For Different Functions

Creating Your Own Grammar Rules

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

More Features of the RTK Query

More Features of the RTK Query

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Build a Solana Crowdfunding App using React

100 Days of Code: Death of Summer on the Island of NixOS

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Best Coding Challenge Sites For Beginners

1 Minute Read #17 -strings in Python*

Build a Solana Crowdfunding App using React

100 Days of Code: Death of Summer on the Island of NixOS

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Best Coding Challenge Sites For Beginners

1 Minute Read #17 -strings in Python*

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps