Invalid useAsyncData pending state if data is cached
I have a custom wrapper around data fetching like this:
export const useApiData = <T = unknown, R = T>(
key: string,
endpoint: string | Ref<string> | ComputedRef<string>,
options: Omit<AsyncDataOptions<ApiResponse<T>, R>, 'transform'> & {
query?: Record<string, any>;
method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
body?: any;
transform?: (data: ApiResponse<T>) => R;
onResponse?: (context: {
request: any;
response: any;
options: any;
}) => void | Promise<void>;
onResponseError?: (context: {
request: any;
response: any;
options: any;
}) => void | Promise<void>;
} = {},
) => {
... // ommitted
const api = useStandardizedApi();
return useAsyncData<ApiResponse<T>, StandardErrorResponse, R>(
key,
() =>
api.handleApiCall<T>(unref(endpoint), {
method,
query,
body,
onResponse,
onResponseError,
}),
{
...asyncDataOptions,
transform: transform as AsyncDataOptions<ApiResponse<T>, R>['transform'],
},
);
}; A sample usage is like this const {
pending: fetchingClientVehicles,
error: errorFetchingClientVehicles,
execute: refetchClientVehicles,
data: clientVehicles,
} = useApiData<TrackedVehicles[], TrackedVehicles[]>('client-devices', computedURL, {
method: 'GET',
server: false,
immediate: false,
... // code ommitted
});. Because of the key, the data is cached as expected. However, the value of fetchingClient vehicles still remains true even though I can see the data on the screen. Any pointers as to why this could be happening?
