Skip to content

Add openapi-solid-query #2191

Open
Open
@t-rosa

Description

@t-rosa

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestopenapi-tsRelevant to the openapi-typescript library

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions