mutate is not rerendering

Bug report

Description / Observed Behavior

I’m using mutate() to update data. Here is a little snip of what I do:

doRequest("someUrl", "PUT", someData).then(response => {
            mutate({}, false);
            mutate(response, false);
        });

this way it is working and the data of my nextjs app is updated properly, but its pretty ugly since there are two re-renders triggered.

Here is what I want to do:

doRequest("someUrl", "PUT", someData).then(response => {
            mutate(response, false);
        });

or better would be

mutate(doRequest("someUrl", "PUT", someData), false);

This way data is not updated. I also tried to this:

doRequest("someUrl", "PUT", someData).then(response => {
            mutate({...response}, false);
        });

Changing mutate(response, false); to mutate({…response}, false); should not be nessesary since the object returned from server already is a new objectReference, but I gave it a try just to be sure.

Expected Behavior

I would expect swr to re-render every time when I use mutate with a new object reference.

Additional Context

SWR version: 0.3.4

[michaeltroya]

Having the same issue here

[wobsoriano]

Having problems with useSWRInfinite and the bound mutate function. Trying to mutate an array of arrays, which does not throw an error and logs the updated data correctly in console, but doesn’t rerender the components. Anyone having the same problem?

      mutate((currentData) => {
        return currentData.map((item) => {
          const posts = [...item.payload.posts];
          const postIndex = posts.findIndex((i) => i.post.guid === postId);

          if (postIndex !== -1) {
            posts[postIndex].post.total_likes = 1;
          }

          return {
            ...item,
            payload: {
              ...item.payload,
              posts,
            },
          };
        });
      }, false);

This works but with a UI lag (about 500 - 1000 ms)

      mutate((currentData) => {
        mutate(currentData.map((item) => {
          const posts = [...item.payload.posts];
          const postIndex = posts.findIndex((i) => i.post.guid === postId);

          if (postIndex !== -1) {
            posts[postIndex].post.total_likes = 1;
          }

          return {
            ...item,
            payload: {
              ...item.payload,
              posts,
            },
          };
        }))

       return currentData
      }, false);