How to check new data and show a notification

[kungfu321]

I'm using SWR to fetch new data, but I want to show a notification when has new data was fetched.
Any idea for me. Thanks

[promer94]

I think you could use the useEffect hook to achieve this

const { data } = useSWR('/api')
useEffect(() => {
 if(data) {
   // show notification
 } 
}, [data])

[kungfu321]

It does not work true. Because when the first data or change router, it shows a notification.

[shuding]

You can use a ref to keep the previous data, and compare it with the latest value.

[andykao1213]

Try to do something with the options onSuccess? onSuccess will only be fired if there is a request being made.

useSWR('/api', { onSuccess: (data, key, config) => { /* do whatever you want */ }})

[kungfu321]

But how to know when the time have new data?
Because onSuccess return all data

[nandorojo]

Can you compare it somehow?

const oldData = useRef()

useSWR('/api', { onSuccess: (data, key, config) => { 
  const didDataChange = data !== oldData.current // you can customize this
  if (didDataChange) {
    // do some thing here
  }
  oldData.current = data
}})

[kungfu321]

I found compare(a, b) options can compare when the data change, and it's work for me.

[VladSez]

@kungfu321 could you share your solution?

[mmortelliti]

You can probably also use something like data.status !== 304... since the response status of 304 would mean 'not modified'

[tettoffensive]

I'm looking for a way when the data has changed to trigger another call to refetch the data. I'm not sure this is a very good practice to do this way but...

{
      onSuccess: async (newData) => {
        const equal = dequal(oldData.current, newData);
        oldData.current = data;
        if (!equal) {
           await mutate(keyForADifferentMutation);
        }
      },
    },

I didn't use compare because I didn't want the compare method to wait for a Promise, but I was thinking it would be ok in onSuccess

[nandorojo]

There’s no need for this to be a promise. You aren’t calling anything after mutate, so you don’t have to await it. In any case, it’s fine for that to be a promise.