Solid Query

Start by providing an OpenAPI specification and an Orval config file. To use Solid Query, define the client in the Orval config to be solid-query.

Example with Solid Query

import { defineConfig } from 'orval';


export default defineConfig({
  petstore: {
    output: {
      mode: 'tags-split',
      target: 'src/petstore.ts',
      schemas: 'src/model',
      client: 'solid-query',
      mock: true,
    },
    input: {
      target: './petstore.yaml',
    },
  },
});

Navigate to the Orval config reference to see all available options.

The Solid Query mode will generate an implementation file with one custom hook per path in the OpenAPI Specification using @tanstack/solid-query.

For example, this Swagger specification will generate the following hooks:

export const showPetById = (
  petId: string,
  options?: AxiosRequestConfig,
): Promise<AxiosResponse<Pet>> => {
  return axios.get(`/pets/${petId}`, options);
};


export const getShowPetByIdQueryKey = (petId: string) => [`/pets/${petId}`];


export const createShowPetById = <
  TData = Awaited<ReturnType<typeof showPetById>>,
  TError = Error,
>(
  petId: string,
  options?: {
    query?: CreateQueryOptions<Awaited<ReturnType<typeof showPetById>>, TError, TData>;
    axios?: AxiosRequestConfig;
  },
) => {
  const { query: queryOptions, axios: axiosOptions } = options ?? {};


  const queryKey = queryOptions?.queryKey ?? getShowPetByIdQueryKey(petId);
  const queryFn = () => showPetById(petId, axiosOptions);


  const query = createQuery<Awaited<ReturnType<typeof queryFn>>, TError, TData>(
    () => ({
      queryKey,
      queryFn,
      enabled: !!petId,
      ...queryOptions,
    }),
  );


  return {
    queryKey,
    ...query,
  };
};

How to Use Other Queries

Given the following configuration, Orval will generate createQuery and createInfiniteQuery hooks with a nextId query parameter. It is also possible to override the config for every hook with the options field.

import { defineConfig } from 'orval';


export default defineConfig({
  petstore: {
    output: {
      ...
      override: {
        query: {
          useQuery: true,
          useInfinite: true,
          useInfiniteQueryParam: 'nextId',
          options: {
            staleTime: 10000,
          },
        },
      },
    },
    ...
  },
});

If needed, it is also possible to override the query options for a single operation or tag:

import { defineConfig } from 'orval';


export default defineConfig({
  petstore: {
    output: {
      ...
      override: {
        operations: {
          listPets: {
            query: {
              ...
            },
          }
        },
      },
    }
    ...
  },
});

Key Differences from React Query

Solid Query uses the create prefix instead of use:

  • createQuery instead of useQuery
  • createMutation instead of useMutation
  • createInfiniteQuery instead of useInfiniteQuery

The generated hooks follow SolidJS conventions and work seamlessly with Solid's reactivity system.

Go here for a full example (coming soon)

Edit this page on GitHub
Was this page helpful?