Skip to content

Add openapi-solid-query #2191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task
t-rosa opened this issue Mar 5, 2025 · 0 comments
Open
1 task

Add openapi-solid-query #2191

t-rosa opened this issue Mar 5, 2025 · 0 comments
Labels
enhancement New feature or request openapi-ts Relevant to the openapi-typescript library

Comments

@t-rosa
Copy link

t-rosa commented Mar 5, 2025

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

@t-rosa t-rosa added enhancement New feature or request openapi-ts Relevant to the openapi-typescript library labels Mar 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request openapi-ts Relevant to the openapi-typescript library
Projects
None yet
Development

No branches or pull requests

1 participant