Open
Description
Description
It's too bad we don't have an equivalent to openapi-react-query for solid.
Maybe it could be implemented?
Proposal
Simple example
import createClient from 'openapi-fetch';
import createQueryClient from 'openapi-solid-query';
const client = createClient<paths>();
const $api = createQueryClient(client);
const Component = () => {
const query = $api.createQuery('get', '/users');
return (
<div>
<Switch>
<Match when={query.isPending}>
<p>Loading...</p>
</Match>
<Match when={query.isError}>
<p>Error: {query.error.message}</p>
</Match>
<Match when={query.isSuccess}>
<For each={query.data}>{(user) => <p>{user.name}</p>}</For>
</Match>
</Switch>
</div>
)
}
I believe we could simply take the React package and adapt it. However, I don’t have much experience with either Solid or openapi-typescript. What are your thoughts?
I’m not entirely sure how challenging it might be, but I don’t expect it to be overly complicated.
- All instances of useX should be replaced with createX.
import {
type UseMutationOptions,
type UseMutationResult,
type UseQueryOptions,
type UseQueryResult,
type InfiniteData,
type UseInfiniteQueryOptions,
type UseInfiniteQueryResult,
type UseSuspenseQueryOptions,
type UseSuspenseQueryResult,
type QueryClient,
type QueryFunctionContext,
type SkipToken,
useMutation,
useQuery,
useSuspenseQuery,
useInfiniteQuery,
} from "@tanstack/react-query";
import {
type CreateMutationOptions,
type CreateMutationResult,
type CreateQueryOptions,
type CreateQueryResult,
type InfiniteData,
type CreateInfiniteQueryOptions,
type CreateInfiniteQueryResult,
type QueryClient,
type QueryFunctionContext,
type SkipToken,
createMutation,
createQuery,
createInfiniteQuery,
} from "@tanstack/solid-query";
- Each createX function accepts a function that returns the options object.
type FunctionedParams<T> = () => T;
// To access the "queryFn" we had to use the return type since options is a function. (Not 100% sure)
// So this:
queryFn: Exclude<
CreateQueryOptions<
Response["data"],
Response["error"],
InferSelectReturnType<Response["data"], Options["select"]>,
QueryKey<Paths, Method, Path>
>["queryFn"],
SkipToken | undefined
>;
// Become
queryFn: Exclude<
ReturnType<
CreateQueryOptions<
Response["data"],
Response["error"],
InferSelectReturnType<Response["data"], Options["select"]>,
QueryKey<Paths, Method, Path>
>
>["queryFn"],
SkipToken | undefined
>;
- Suspense is not utilized.
Extra
- I’m willing to open a PR (see CONTRIBUTING.md)