Request stuck on "pending" status

[taylorhlabs]

I have a certain SWR request that gets stuck on "pending" in the Network tab in Chrome console. Any reason why a specific request would get stuck on pending? Other SWR requests keep firing without any issue. The steps below outline the steps in more detail but I don't have much else to go on.

1. I call useSWR('/api/get-user-activity') to get initial data which resolves successfully.
2. After some data is updated, I call mutate to update local data. This updates local data successfully and update is shown on screen.

  mutate(
    '/api/get-user-activity',
    async (existingData) => {
      const activityIndex = existingData.activities.findIndex((activity) => activity.id === changedActivity.id);
      const newData = update(existingData, {
        activities: { [activityIndex]: { $set: changedActivity } }
      });
      return newData;
    },
    false
  );

3. I call mutate('/api/get-user-activity'); to get latest from DB and the request just remains stuck as "pending" in Chrome console.

Any ideas on what would cause the request to get stuck on pending?

[ErnestBrandi]

Hi, I told you not to call mutate twice in a row. Not sure why but it seems to cause a undefined behavior. You know you can just omit the third argument of mutate (or set it to true) and it will update the data locally AND refetch it from the server.

[taylorhlabs]

Hey @ErnestBrandi - thanks again for the quick reply. In my question above, I did leave out the important detail that I have an await updateDatabase call in between the 2 mutations. I was basically trying to mirror the Mutation and POST Request approach from the SWR docs. That being said, I also have some other SWR requests sprinkled in there too and I think I'm probably still creating some kind of "overlap" issue. Part of the reason I posted the question was to see if anyone else ran into the stuck "pending" status and if there was a definitive cause and/or way to fix it. For now though, I likely need to just simplify things in my logic.

[ErnestBrandi]

That is surprising as the delay induced by the await updateDatabase should be enough for the 2 calls not to interfere with each-other. For instance here (https://codesandbox.io/s/exciting-morse-9ss2d?file=/pages/index.js), the 2 calls "overlap" one another and data is not fetched correctly; but if you un-comment line 25, they don't anymore.

[taylorhlabs]

Thanks for setting up the code sandbox. It's very helpful in this case to illustrate the "overlap" issue. To add more detail to my issue, after I fetch the data from the database using SWR, I copy the data and remap it for my model requirements before feeding it into a react-table component that renders it out. (Using console logs, this remapping appears to complete instantly as I'm not working with a large data set.) The react-table data is memoized (as suggested by react-table component) and every time the incoming SWR data changes, it's copied and remapped and fed into the table.

  // get data
  const { swrActivityResources, swrActivityResourcesError, swrActivityResourcesMutate } = useUserActivity();
  // remap tableData and rerender every time swrActivityResources changes
  const tableData = useMemo(() => dataChecker(), [swrActivityResources]);
  function dataChecker() {
    skipPageResetRef.current = true;
    console.log('useMemo: data changed!', swrActivityResources);
    if (!swrActivityResources) return [];
    // create new array of activities and add reference to resource
    const newData = [];
    for (let activity of swrActivityResources.activities) {
      const linkedResource = findResource(activity.resourceId);
      newData.push({ ...activity, resource: linkedResource });
    }
    return newData;
  }

... elsewhere in my app ...

const addActivity = async () => {
  swrActivityResourcesMutate(newActivity, false); // updates local cache successfully
  await updateDatabase(newActivity);
  swrActivityResourcesMutate(); // should revalidate to get latest data from DB but request hangs on "pending"
}

I wonder if the data manipulation I'm doing to the SWR cache data in the useMemo hook after I mutate it initially is causing the "overlap" with the second SWR call that gets latest data from DB. For instance, if I delay the second SWR call for 5 seconds or more it doesn't get stuck pending. (My await updateDatabase call that occurs in between mutating cache and then revalidating doesn't cause a long enough delay to avoid the request "pending" issue.) Something seems to be blocking it if I delay it for less than 5 seconds. I know this isn't much to go on. I'll see if I can set up a code sandbox for recreating the issue.

[taylorhlabs]

Welp, I ran out of ideas so I ended up clearing out a bunch of test data and the second mutate() request to get latest data from database is no longer getting stuck on pending. Not sure if there was some dirty data or too much data or what, but all seems to be working now. 🤦‍♂️ Thanks again @ErnestBrandi for the assist.

[ErnestBrandi]

Nice :) Just keep it simple, usually I barely call mutate in my apps. When data is updated (most often on form submit) you normally switch from one page to another and your data is therefore re-fetched anyway.