Another way to mutate useSWRInfinite request?

[vixeven]

What it's the best way to refresh the entire list, if I need to trigger it from another component?

For example:

<AddComment />
// ^^^^^^^^^^  I need to refetch entire list after successfully adding

<Comments />
// ^^^^^^^^  I have `mutate()` from *useSWRInfinite* hook

@shuding , is there a workaround that I'm missing out?

[shuding]

The best way is to create a customized hook:

const useComments () {
  const { data, mutate, size, setSize } = useSWRInfinite()

  const comments = data ? [].concat(data) : []

  return {
    comments,
    nextPage: () => setSize(size + 1),
    refresh: mutate,
  }
}

And use it in the component that you need to refresh the list:

function Foo () {
  const { comments } = useComments()
  // render comments
}

...

function Bar () {
  const { refresh } = useComments()

  return <button onClick={refresh}>refresh</button>
}

[vixeven]

You are my hero! Thanks.

[wildfrontend]

@shuding
it is possible mutate one size data in useSWRInfinite

like

size = 3
mutate data  range at size = 3 

[aryaniyaps]

Thanks a lot for the answer!

[vixeven]

@shuding Is there a way to locally update useSWRInfinite data?
Ex: After submit my comment, it will take 2 request response long, because I can't mutate until request is done and fetching new data also takes time, so it will be a visible delay until is inserted in DOM.

Any clean way on making it (feels) instant? :/

Edit: I wonder if is swr a solution for this scenario? Because it will refresh all loaded pages previously, which is not even necessary.

[iamthesiz]

I feel like there should be an example for optimistic updates.