fetch data, then modify response, then return newData

[andresyapp]

Hi everyone!

I have a custom hook, where I perform the query with the fetcher, but then I need to manipulate the response, add a property to each item in the array, and then return that modified array and export it as DATA.
I tried it with onSuccess, as I show below:
onSuccess: (data, key) => { if (data) {newArray = data.data.map((obj) => ({...obj, isNew: 'true'})) return newArray} }

but it did not work, it is a simplified version, but if I try the modification of the array, in a console.log, it works, but I can not return the newArray and make the bind with data or export it with another name, to be used in the child component.

thanks for your help!

[dev-afzalansari]

but if I try the modification of the array, in a console.log, it works, but I can not return the newArray

You cannot return modified data from onSuccess callback and get it as actual data returned by useSWR hook.

For your use case you can modify the data within that custom hook and return it from there.

function useCustomSWR() {
    let { data } = useSWR('your-key', yourFetcherFn)

    let newArray
    if(data) {
        newArray = data.data.map((obj) => ({...obj, isNew: 'true'}))
    }

    return {
        data: newArray,
        //...
    }
}

[andresyapp]

Thanks! works great,