Updating child component data only

[Thalvik]

Hi, I am currently in process of refactoring an React app to utilize rtk-query. I have following component parent component Page:

Page.jsx

export const defaultContext = {
    header: {},
};
export const MyContext = React.createContext(defaultContext);

export default function Page() {
    const { data, isError, isFetching, isLoading } = useFetchPageQuery();

    if (isFetching) {
        return <Loader message={loadingText} />;
    }

    return (
      <DndProvider backend={HTML5Backend}>
        <MyContext.Provider value={data}>
          <div className={`${styles.page} ${className}`}>
            <div className={styles.leftSide} />
            <div className={styles.rightSide} />
            {children}
            <Categories/>
            <Tags/>
          </div>
        </MyContext.Provider>
      </DndProvider>
    );
}

In Categories/Tags component I have list of categories and tags. The query for fetching these categories/tags does not exists
as separate endpoint, I am reusing useFetchPageQuery() to get those in type of an array, for this specific page.
And for Page API I have set tag 'Page'.

Categories.jsx

function Categories() {
  const { data, isError, isFetching, isLoading } = useFetchPageQuery();
  const categories = data.categories;
  return (
    <CategoryList categories={categories}/>
  );
}

Tags.jsx

function Tags() {
  const { data, isError, isFetching, isLoading } = useFetchPageQuery();
  const tags = data.tags;
  return (
    <TagList tags={tags}/>
  );
}

For categories/tags create/update/delete operations I have separate api's endpoints. When I call them, I clear the cache with invalidatesTags

invalidatesTags: ['Page']

This is working as expected, except that both Categories and Tags components get's re-rendered(which is kind of expected behavior) considering that they use same query hook which is fired once cache is cleared.

Is there an option or should I re-organize my code in some other way, that once for example I delete category that only Categories component gets re-rendered, not Tags also.

I don't have the ability to change my backend API to fetch Categories/Tags for Page in separate endpoints(this would mostly solve the issue).

Thank you

[EskiMojo14]

You can use selectFromResult to control rerenders based on selected data.

[Thalvik]

@EskiMojo14 Tnx, but not sure how to properly implement this.

[EskiMojo14]

function Categories() {
  const { categories, isError, isFetching, isLoading } = useFetchPageQuery(undefined, {
    selectFromResult: ({ data, isError, isFetching, isLoading }) => ({
      categories: data.categories,
      isError,
      isFetching,
      isLoading
    })
  });
  return (
    <CategoryList categories={categories}/>
  );
}

// Tags.jsx

function Tags() {
  const { tags, isError, isFetching, isLoading } = useFetchPageQuery(undefined, {
    selectFromResult: ({ data, isError, isFetching, isLoading }) => ({
      tags: data.tags,
      isError,
      isFetching,
      isLoading
    })
  });
  return (
    <TagList tags={tags}/>
  );
}

[Thalvik]

@EskiMojo14 Thanks, but the render does not happen when I hit endpoint for either create/update/delete for tag/categories. It only works as mentioned, the whole Page component gets re-rendered.