Is there a way to update selected data with react query using setQueryData method?

Question

I was reading on how it is possible to update existing query data with Query Client's setQueryData method.

Here is how I transform my data.

    {
      select: (data) => {
        let fullDaysArray = [] as Day[];
        data.docs.map((docSnapshot) => {
          const { id } = docSnapshot;
          let data = {
            ...docSnapshot.data(),
            documentId: id,
          } as Day;
          fullDaysArray.push(data);
        });
        fullDaysArray.sort((a, b) => a.order - b.order);
        return fullDaysArray;
      },

I did it like this:

      queryClient.setQueryData("currentDiary", newData);

However I started getting these errors:

TypeError: Cannot read properties of undefined (reading 'map')

And that is because, the newData that I am setting is not a firebase object that looks like this: Fu {_firestore: La, _userDataWriter: dh, _snapshot: qo, metadata: $u, query: Sa}, but the actual already transformed object that looks like this:

[
        {
          dayName: "Monday",
          order: 1,
          uid: "1234",
          //...

Which obviously fails data.docs.map((docSnapshot)

Is there a way for me to only update the variable that I am returning from select: (data) method, which would be fullDaysArray?

TkDodo · Accepted Answer · 2022-06-14 18:31:34Z

1

Is there a way for me to only update the variable that I am returning from select: (data) method, which would be fullDaysArray?

No, there is not. The data that is returned from the queryFn is what gets put into the cache, and that is also what you have to write with setQueryData. select can exist on multiple observers, and it allows you to select and subscribe to different slices of the cached data.

It might be that select is not the best place in your situation to do the transformation - if you want to transform the data that gets stored in the query cache, you have to do it inside the queryFn.

answered Jun 14, 2022 at 18:31

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is there a way to update selected data with react query using setQueryData method?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related