import {useAsync} from '@quilted/preact-async';
function MyComponent() {
const result = useAsync(
async () => {
const response = await fetch('https://api.example.com/data');
return response.json();
},
{
server: true,
},
);
if (result.pending) {
return <LoadingSpinner />;
}
if (result.error) {
return <ErrorMessage error={result.error} />;
}
return <DataDisplay data={result.value} />;
}
import {useAsyncModule, AsyncModule} from '@quilted/preact-async';
const asyncModule = new AsyncModule(() => import('./my-module.ts'));
console.log(asyncModule.status);
console.log(asyncModule.imported);
console.log(asyncModule.reason);
console.log(asyncModule.url.href);
const loaded = await asyncModule.import();
const loaded2 = await asyncModule.promise;
function MyComponent() {
const {moduleMethod} = useAsyncModule(asyncModule);
return <DataDisplay data={moduleMethod()} />;
}
function MyComponent2() {
if (asyncModule.status !== 'resolved') {
return <button onClick={() => asyncModule.import()}>Load it!</button>;
}
const {moduleMethod} = asyncModule.imported!;
return <DataDisplay data={moduleMethod()} />;
}
import {AsyncModule, AsyncComponent} from '@quilted/preact-async';
const module = new AsyncModule(() => import('./MyComponent.tsx'));
<AsyncComponent
module={module}
render={({default: Component}) => <Component />}
/>;
const MyComponent = AsyncComponent.from(module, {
renderLoading: <LoadingSpinner />,
});
<MyComponent />;
@see https://tanstack.com/query/latest/docs/framework/react/reference/useQuery
- [x]
queryKey
(askey
) - [x]
queryFn
(asfunction
) - [x]
enabled
(asactive
) - [ ]
networkMode
(no — implement in userland if needed) - [-]
retry
(withuseAsyncRetry()
) - [ ]
retryOnMount
(no — useuseAsyncRetry
or a manualuseEffect
instead) - [ ]
staleTime
- [ ]
gcTime
- [ ]
queryKeyHashFn
(no — convertkey
to a string ahead of time if you want this) - [ ]
refetchInterval
- [ ]
refetchIntervalInBackground
- [ ]
refetchOnMount
- [ ]
refetchOnWindowFocus
- [ ]
refetchOnReconnect
- [ ]
notifyOnChangeProps
(no — uses signals for all mutable properties) - [ ]
select
(no — create a computed signal instead) - [x]
initialData
(ascached.value
) - [x]
initialDataUpdatedAt
(ascached.time
) - [ ]
placeholderData
(no — do this in your component instead) - [ ]
structuralSharing
(no — out of scope) - [ ]
throwOnError
(no — do this in your component instead) - [ ]
meta
(no — manually write this to the returnedAsyncAction
instance, since it is directly cached) - [x]
queryClient
(ascache
)
- [x]
status
(different values, though) - [x]
isPending
(asisRunning
) - [ ]
isSuccess
(no — usestatus === 'resolved'
orvalue
instead) - [ ]
isError
(no — usestatus === 'rejected'
orerror
instead) - [ ]
isLoadingError
(no — seeisError
) - [ ]
isRefetchError
(no — implement in userland if needed) - [x]
data
(aliased asvalue
) - [ ]
dataUpdatedAt
(TODO asresolved.updatedAt
) - [x]
error
- [x]
errorUpdatedAt
(asupdatedAt
, but only if error was the last result) - [ ]
failureCount
(no — implement in userland if needed) - [ ]
failureReason
(no — implement in userland if needed) - [ ]
isStale
- [x]
isFetched
(ashasFinished
) - [ ]
isFetchedAfterMount
(no — implement in userland if needed) - [ ]
fetchStatus
(no — implement in userland if needed) - [ ]
isPaused
(no — implement in userland if needed) - [ ]
isRefetching
(no — useisRunning && hasFinished
instead) - [ ]
isLoading
(no — useisRunning && !hasFinished
instead) - [ ]
isInitialLoading
(no — useisRunning && !hasFinished
instead) - [ ]
errorUpdateCount
(no — implement in userland if needed) - [x]
refetch
(asrerun
)