CODEWITHSUNDEEP
reactjsreduxredux-toolkitrtk-query
i like Cola
i like Cola

Reputation: 297

rtkQuery update cache

I did not understand how to update the cache without additional requests in the component, in this case I call endpoint getEntity so that the cache key endpoint getEntity + arg is assigned to each entity in the code.

I wrote a simple example

Now I attach the cache key in this way,

const Entity = ({ id }) => {
  const res = apiQuery.useGetEntityQuery(id);
  return <div>{JSON.stringify(res.data)}</div>;
};

const Output = ({ Entities }) => {
  return (
    <div>
      {Entities &&
        Entities instanceof Array &&
        Entities.map(({ id }) => {
          return <Entity key={id} id={id} />;
        })}
    </div>
  );
};

how correct would it be to call api Query.useGetEntityQuery(id) for each element?

Is there a more correct way to work with the cache applicable to this case?

Is it possible to make the code below work and what is needed for this, or is it not necessary to do this?

const Output = ({ Entities }) => {
  return (
    <div>
      {Entities &&
        Entities instanceof Array &&
        Entities.map(({ id, value }) => {
          return (
            <div key={id}>
              {id}:{value}
            </div>
          );
        })}
    </div>
  );
};

Upvotes: 0

Views: 1953

Answers (1)

phry
phry

Reputation: 44086

In RTK Query, each cache entry is completely separate, so you have to write the logic for that yourself if you really need to - although most of the time an additional request does not hurt and that is the main way it is designed to being used.

If you want to do it though, read Manual Cache Updates

Upvotes: 1

Related Questions