Responsiveness vs Performance with dedupingInterval and refreshInterval

[taylorhlabs]

I have been playing around with SWR's options to try to optimize responsiveness in my Next.js app, specifically the dedupingInterval and refreshInterval options. I am using the code below to update data locally, then update the database, then refresh local data with returned data from database. In other words: Mutate local data (using temp id for new object) > update database (return object with database id) > mutate local data (set temp id to database id). Some option configurations seem to help and others seem to prevent rerenders from happening when they should.

export async function useMutateActivityUpdateDb_Add(addedActivity) {
  // update cache (function below) so user sees changes immediately
  useMutateActivity_Add(addedActivity);

  // update database then update cache again with database id
  let response;
  await mutate(`/api/get-resource-activity/${addedActivity.resourceId}`, async (existingActivity) => {
    try {
      const body = {
        resourceId: addedActivity.resourceId,
        commentText: addedActivity.text,
        commentType: addedActivity.type
      };
      // returns comment and resource object:
      // res.json({ resultCreateComment, resultSelectResource });
      response = await axios.post('/api/create-activity', body);
      const newActivity = await response.data.resultCreateComment;
      if (newActivity) {
        console.log('New Comment added:', newActivity);
        const filteredActivity = existingActivity.filter((activity) => activity.id !== addedActivity.id);
        console.log('Mutating again to update cached activity object with database id...:');
        return [newActivity, ...filteredActivity];
      }
    } catch (error) {
      console.error(error);
    }
  });
  console.log('updated SWR cache:', cache);
  return { newActivity: response.data.resultCreateComment, updatedResource: response.data.resultSelectResource };
}

export function useMutateActivity_Add(addedActivity, revalidate = false) {
  mutate(
    `/api/get-resource-activity/${addedActivity.resourceId}`,
    async (existingActivity) => {
      if (existingActivity) return [addedActivity, ...existingActivity];
    },
    revalidate
  );

When I click the save button in my app, there is typically a delay of a second or so before the screen updates with the new data. Is it possible to make the change more instant? Can the delay be reduced using any of SWR's options? Or is the delay related to queuing/deduping/other technical stuff I'm not aware of going on under the hood?

Lowering the dedupingInterval seems to make changes more responsive but I can't say for sure. Also, certain combinations of dedupingInterval and refreshInterval seem to prevent the data from being updated at all on screen. What are the general guidelines around refreshInterval and dedupingInterval (besides just leaving them alone because smarter folks have already set wise defaults 😀 )? Are they related at all? What tradeoffs should I be aware of when changing them? Will certain combinations screw up rerenders?

[ErnestBrandi]

Hi, I think the fact you are calling mutate twice in a row make them kind of "overlap" one another.
What you should do instead is :

// update locally
mutate('key', async (activities) => {
   if (activities) return [newActivity, ...activities];
}, false);

// update db
await axios('api/createActivity');

// call mutate again in order to fetch updated data
mutate('key');

Oh and yes, it probably has nothing to do with set options.

[taylorhlabs]

Thanks @ErnestBrandi for your quick reply. I reworked my approach a bit as you suggested and seems to be working now. In my previous approach, I was trying to mutate the cache with updated value from database and avoid a second database call but I can see the value in just fetching latest data from DB in second call to be safe.