RTK Query useQuery default return values

[sebarti]

What's a good way to handle default return values in RTK Query. For example the following is something I do often :

const { data: applications = [], isLoading } = useGetApplicationsQuery()

This works fine in most cases. However, if i need to put it into dependencies of useEffect for further processing then i get a recursive update cycle in case the API is down and not returning data.

const { data: applications = [], isLoading } = useGetApplicationsQuery()
const [displayedData, setDisplayedData] = useState([])

useEffect(() => {
  setDisplayedData(applications)
}, [applications])

setDisplayedData in useEffect triggers a rerender which itself initiates applications to a new array with a new reference which triggers useEffect...

Of course i could do the following

const { data: applications, isLoading } = useGetApplicationsQuery()

However, i need applications throughout my component in many different places and handling the default value as array makes life much easier than checking if applications is really an array or undefined.

Does anyone have suggestions for this usecase or am I totally missing something here?

[markerikson]

My first question is, why are you copying values from the useQuery hook into state here? That's generally not the right approach for most problems.

[sebarti]

Thanks for your reply. Well in this specific case I provide a a simple interface to filter the data. So i need the original data from the api to configure the filter options and then I need to display the filtered data to the user. The user however can also reset the filters.

But aside from my specific problem here, would you never use a default value?

[phryneas]

Let's say, it would probably be a very high increase in type complexity to add that feature.
If we get a good PR and the types do not explode, that would be very welcome. But I fear it could have a large impact on the types and I'm not sure if that's worth it.

[StefanBRas]

Maybe you can wrap the useGetApplicationsQuery with another hook that handles it?
Something like

const arr = []
const useGetApplicationsQueryDefault = () => {
    const resp = useGetApplicationsQuery()
    return resp.data === undefined ? {...resp, data: arr} : resp
}

Not sure if that's the best way to keep the reference stable here, but i think it works.
If you want to make a generic wrapper I tried something similar here though with some typescript issues.