Mutating with useSWRInfinite

[htunnicliff]

Hi all! Does anyone have a good idea of how to use mutate well with useSWRInfinite? I'm finding myself writing functions like this and it just feels like there has to be a better way:

interface Item {
  id: number;
};

const { data, mutate } = useSWRInfinite<Item[]>(getKey);

const update = (newItem) => mutate((existingData) => {
  // Make new array
  const newData = data.map((page) => [...page]);

  // Loop through each page
  newData.some((page, pageIdx) => {
    // Find the old item index
    const itemIdx = page.findIndex(
      (oldItem) => oldItem.id === newItem.id
    );

    // If item is in the current page, replace it
    if (itemIdx !== -1) {
      newData[pageIdx][itemIdx] = newItem;
      // End the `some` loop
      return true;
    }

    // Continue the `some` loop
    return false;
  });

  // Return new data
  return newData;
});

[Develliot]

I found my self using the same patterns for looping though pages of data and then the data and transforming the data. So I wrote some data transform until functions for create, edit and delete in a util file and use them everywhere. It was typescript friendly using an interface that just looks for items with ID so I can use them for pretty much every API call.

As everyone's API looks different it's not something that can be built into SWR.

[Deivaras]

I found my self using the same patterns for looping though pages of data and then the data and transforming the data. So I wrote some data transform until functions for create, edit and delete in a util file and use them everywhere. It was typescript friendly using an interface that just looks for items with ID so I can use them for pretty much every API call.

As everyone's API looks different it's not something that can be built into SWR.

Would it be any chance to share this?