Access swr data return inside fetcher

[pke]

Its more a question of JS variable scoping & binding than swr but still related.

The server has an endpoint that returns all the unread messages (for all channels).

So every minute or so the enpoint is polled and if new messages have arrived the hook should return the newly arrived unread messages.

I could setup 2 hooks, one fetching all the pending unread messages and a dependent hook that takes those messages and compares it to the previous ones. But I wonder if I could handle it in one hook instead (since the messages themselves are not that important, only that there are new messages).

The client is supposed to show a toast when new messages arrive.

In the snipped below, is it safe to access data

function useNewUnreadMessages() {
  const { data = [] } = useSWR(..., () => {
    fetch("unreadMessages").then(results => {
      results.filter(result => !data.find(oldDate => oldDate.id === result.id))
    })
  }, {
    refreshInterval: 6000,
  })

  return {
    newUnreadMessages: data
  }
}

[YuriGor]

It's not clear what does it mean "new unread messages".
You need some reference point in time to divide all unread messages into old\new categories, e.g. time of login or time of last opened notifications list in ui.
You cannot rely on the time of fetching - fetching may happen multiple times during the minute, so first time you have some "new" messages and few seconds later they are already "old" - not really useful.
Once you will have stable reference point in time - it would be easy to just filter current data - everything what is later will be "new". If reference time changed - list of "new" messages will be updated on next render.