SvelteStack / svelte-query

Performant and powerful remote data synchronization for Svelte
https://sveltequery.vercel.app
MIT License
813 stars 31 forks source link

Hooking needing subscribe to get results #97

Closed Arzemn closed 1 year ago

Arzemn commented 1 year ago

-Update - i figured it out, in svelte land you put a $ in front to autosubscribe

I am working on evaluating svelte-query and so far i am having an issue where it seems i have to subscribe to get the results instead of the hook automatically subscribing and giving me the results for example, i can only get the custom hook results to work like below

<script>
    import {useQuery} from "@sveltestack/svelte-query";
    import {useListPets} from "./pets/pets";

    let pets;
    const listPets = useListPets();
    listPets.subscribe(val => {pets = val})
    console.log(listPets)
</script>
{#if (pets.isLoading)}
    <div>Loading The Query</div>
{/if}
{#if (pets.isError)}<div>!!!! ERROR</div>{/if}
{#if (pets.isSuccess)}<div>OK SUCCESS</div>{/if}

i was expecting it to work more like this (shown in the documentation)

<script>
    import {useQuery} from "@sveltestack/svelte-query";
    import {useListPets} from "./pets/pets";

    const listPets = useListPets();
    console.log(listPets)
</script>
{#if (listPets .isLoading)}
    <div>Loading The Query</div>
{/if}
{#if (listPets .isError)}<div>!!!! ERROR</div>{/if}
{#if (listPets .isSuccess)}<div>OK SUCCESS</div>{/if}

my pets hook looks like this

 * Generated by orval v6.9.0 🍺
 * Do not edit manually.
 * Swagger Petstore
 * OpenAPI spec version: 1.0.0
 */
import axios from 'axios'
import type {
  AxiosRequestConfig,
  AxiosResponse,
  AxiosError
} from 'axios'
import {
  useQuery,
  useMutation
} from '@sveltestack/svelte-query'
import type {
  UseQueryOptions,
  UseMutationOptions,
  QueryFunction,
  MutationFunction,
  UseQueryStoreResult,
  QueryKey
} from '@sveltestack/svelte-query'
import type {
  Pets,
  Error,
  ListPetsParams
} from '.././model'

type AwaitedInput<T> = PromiseLike<T> | T;

      type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

/**
 * @summary List all pets
 */
export const listPets = (
    params?: ListPetsParams, options?: AxiosRequestConfig
 ): Promise<AxiosResponse<Pets>> => {
    return axios.get(
      `/pets`,{
    ...options,
        params: {...params, ...options?.params},}
    );
  }

export const getListPetsQueryKey = (params?: ListPetsParams,) => [`/pets`, ...(params ? [params]: [])];

export type ListPetsQueryResult = NonNullable<Awaited<ReturnType<typeof listPets>>>
export type ListPetsQueryError = AxiosError<Error>

export const useListPets = <TData = Awaited<ReturnType<typeof listPets>>, TError = AxiosError<Error>>(
 params?: ListPetsParams, options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof listPets>>, TError, TData>, axios?: AxiosRequestConfig}

  ): UseQueryStoreResult<Awaited<ReturnType<typeof listPets>>, TError, TData, QueryKey> & { queryKey: QueryKey } => {

  const {query: queryOptions, axios: axiosOptions} = options ?? {}

  const queryKey = queryOptions?.queryKey ?? getListPetsQueryKey(params);

  const queryFn: QueryFunction<Awaited<ReturnType<typeof listPets>>> = ({ signal }) => listPets(params, { signal, ...axiosOptions });

  const query = useQuery<Awaited<ReturnType<typeof listPets>>, TError, TData>(queryKey, queryFn, queryOptions) as UseQueryStoreResult<Awaited<ReturnType<typeof listPets>>, TError, TData, QueryKey> & { queryKey: QueryKey };

  query.queryKey = queryKey;

  return query;
}

/**
 * @summary Create a pet
 */
export const createPets = (
     options?: AxiosRequestConfig
 ): Promise<AxiosResponse<void>> => {
    return axios.post(
      `/pets`,undefined,options
    );
  }

    export type CreatePetsMutationResult = NonNullable<Awaited<ReturnType<typeof createPets>>>

    export type CreatePetsMutationError = AxiosError<Error>

    export const useCreatePets = <TError = AxiosError<Error>,
    TVariables = void,
    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof createPets>>, TError,TVariables, TContext>, axios?: AxiosRequestConfig}
) => {
      const {mutation: mutationOptions, axios: axiosOptions} = options ?? {}

      const mutationFn: MutationFunction<Awaited<ReturnType<typeof createPets>>, TVariables> = () => {
          ;

          return  createPets(axiosOptions)
        }

      return useMutation<Awaited<ReturnType<typeof createPets>>, TError, TVariables, TContext>(mutationFn, mutationOptions)
    }
    /**
 * @summary Info for a specific pet
 */
export const showPetById = (
    petId: string, options?: AxiosRequestConfig
 ): Promise<AxiosResponse<Pets>> => {
    return axios.get(
      `/pets/${petId}`,options
    );
  }

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

export type ShowPetByIdQueryResult = NonNullable<Awaited<ReturnType<typeof showPetById>>>
export type ShowPetByIdQueryError = AxiosError<Error>

export const useShowPetById = <TData = Awaited<ReturnType<typeof showPetById>>, TError = AxiosError<Error>>(
 petId: string, options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof showPetById>>, TError, TData>, axios?: AxiosRequestConfig}

  ): UseQueryStoreResult<Awaited<ReturnType<typeof showPetById>>, TError, TData, QueryKey> & { queryKey: QueryKey } => {

  const {query: queryOptions, axios: axiosOptions} = options ?? {}

  const queryKey = queryOptions?.queryKey ?? getShowPetByIdQueryKey(petId);

  const queryFn: QueryFunction<Awaited<ReturnType<typeof showPetById>>> = ({ signal }) => showPetById(petId, { signal, ...axiosOptions });

  const query = useQuery<Awaited<ReturnType<typeof showPetById>>, TError, TData>(queryKey, queryFn, {enabled: !!(petId), ...queryOptions}) as UseQueryStoreResult<Awaited<ReturnType<typeof showPetById>>, TError, TData, QueryKey> & { queryKey: QueryKey };

  query.queryKey = queryKey;

  return query;
}
Arzemn commented 1 year ago

Figured out i should put the $ in front of any variable to autosubscribe

$listPets will update on changes and give what is needed ($list.isLoading, $list.data)