Console.log not working in api.util.updateQueryData()

[tomascsantos]

Hi all,

I'm attempting to implement optimistic updates, but the updateQueryData function has been very opaque for me:

  let tmp = youdoneApi.util.updateQueryData('getGroups', id, (draftPosts) => {
      let post = draftPosts.find((post) => post.id === id)
      console.log(draftPosts)
      console.log(post)
  }

For some reason, I cannot log what draftPosts nor post are, and when I use visual studio code, I cannot set a breakpoint inside of this callback to find out what objects I'm working with. Does anyone know how to poke inside this black box?

Thanks!!

[markerikson]

@tomascsantos yeah, most likely draftPosts is an Immer Proxy-wrapped "draft" object. See https://redux-toolkit.js.org/usage/immer-reducers#debugging-and-inspecting-drafted-state for tips on how to use the Immer current() util function to log a more readable version.

Not sure why you'd be unable to set a breakpoint in there, though.

[phryneas]

Adding to that: that code is only going to be executed if that cache entry already exists, it will not create a new cache entry. So that "console.log/breakpoint not working" might also be a case of "nothing to update, so code not executing".

[tomascsantos]

Thank you for your replies. I think that current() would be helpful but I think @phryneas is correct in that no code is executing.

What determines whether the cache entry already exists? For more context I'm working with three endpoints here:

  getGroups: builder.query({
      query: () => "api/habits/",
      transformResponse: (response) => {
          return response.map((group) => {
              return processGroup(group);
          })
      },
      providesTags: (result) =>
          result
              ? [
                  ...result.map(({ id }) => ({ type: 'Groups', id })),
                  { type: 'Groups', id: 'LIST' },
              ]
              : [{ type: 'Groups', id: 'LIST' }],
  }),
  getGroup: builder.query({
      query: (id) => ({
          url: `api/habits/${id}/`
      }),
      providesTags: (result, error, id) => [{ type: 'Groups', id }],
  }),
  checkinGroup: builder.mutation({
      query: ({ id, time }) => ({
          url: `api/habits/${id.toString()}/checkin/`,
          method: "POST",
          body: { status: true, checkin_time: time.toISOString() }
      }),
      onQueryStarted({ id, time }, { dispatch, queryFulfilled }) {
          console.log("\n\ndoing optimistic update: ")
          // const patchResult = dispatch(
          let tmp = youdoneApi.util.updateQueryData('getGroups', id, (draftPosts) => {
              console.log("inside!")
              let post = draftPosts.find((post) => post.id === id)
              console.log(draftPosts)
              console.log(post)
          })
          console.log(tmp)
          // )
          queryFulfilled.catch(patchResult.undo)
      },
      invalidatesTags: (result, error, arg) => [{ type: 'Groups', id: arg.id }],
  })

I have 1 endpoint getGroups that returns a list of all of the groups with minimal amount of data to be displayed on the list page.
I have 1 endpoint that returns more detailed information about a particular group for the group details page.
I have the last endpoint checkinGroup that will change a users checkin status from true to false. I wish to implement optimistic updates so that the list page updates more quickly. To do this, I thought that I should target the getGroups endpoint with the relevant id, and mutate that object.

I can assure you that the query getGroups exists because I see it in react native debugger when I begin to call checkinGroup.

Have I missed something?

[phryneas]

I think your problem is this line:

youdoneApi.util.updateQueryData('getGroups', id, (draftPosts)

This will update the cache that is created when you call

useGetGroupsQuery(id)

but I assume you call

useGetGroupsQuery()

which is a different cache entry
So you'd have to call

youdoneApi.util.updateQueryData('getGroups', undefined, (draftPosts)

[tomascsantos]

You are correct thank you very much