fix(@toss/react-query): correct return type of useSuspendedQuery

[manudeli]

Overview

Related Issue #72

Correct useSuspendedQuery return type at enabled is boolean

if enabled is boolean, data returned can be undefined however, data have to be TData in if(isSuccess) statement not TData | undefined

when enabled: boolean, I think SuspendedUseQueryResultOnSuccess | SuspendedUseQueryResultOnIdle is correct not BaseSuspendedUseQueryResult like other cases of useSuspendedQuery's return type Incorrect: BaseSuspendedUseQueryResult<TData | undefined> Expected: SuspendedUseQueryResultOnSuccess<TData> | SuspendedUseQueryResultOnIdle<undefined>

in use case

AS-IS

const Component = () => {
  const boolean = !!(Math.random() > 0.5)

  const query = useSuspendedQuery(
    ["example"] as const,
    async () => {
      return "response" as const
    },
    { enabled: boolean }
  )

  console.log(query.data) // BaseSuspendedUseQueryResult<"response" | undefined>.data: "response" | undefined

  if (query.isSuccess) {
      console.log(query.data) // BaseSuspendedUseQueryResult<"response" | undefined>.data: "response" | undefined
  }

  return ...
}

TO-BE

const Component = () => {
  const boolean = !!(Math.random() > 0.5)

  const query = useSuspendedQuery(
    ["example"] as const,
    async () => {
      return "response" as const
    },
    { enabled: boolean }
  )

  console.log(query.data) // BaseSuspendedUseQueryResult<"response" | undefined>.data: "response" | undefined

  if (query.isSuccess) {
      console.log(query.data) // BaseSuspendedUseQueryResult<"response">.data: "response"
  }

  return ...
}

How to correct

AS-IS

export declare function useSuspendedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options?: Omit<SuspendedUseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'>): SuspendedUseQueryResultOnSuccess<TData>;
export declare function useSuspendedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options: Omit<SuspendedUseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'> & {
    enabled?: true;
}): SuspendedUseQueryResultOnSuccess<TData>;
export declare function useSuspendedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options: Omit<SuspendedUseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'> & {
    enabled: false;
}): SuspendedUseQueryResultOnIdle<undefined>
export declare function useSuspendedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options: SuspendedUseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): BaseSuspendedUseQueryResult<TData | undefined>;

TO-BE

export declare function useSuspendedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options?: Omit<SuspendedUseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'>): SuspendedUseQueryResultOnSuccess<TData>;
export declare function useSuspendedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options: Omit<SuspendedUseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'> & {
    enabled?: true;
}): SuspendedUseQueryResultOnSuccess<TData>;
export declare function useSuspendedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options: Omit<SuspendedUseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'enabled'> & {
    enabled: false;
}): SuspendedUseQueryResultOnIdle<undefined>
export declare function useSuspendedQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options: SuspendedUseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): SuspendedUseQueryResultOnSuccess<TData> | SuspendedUseQueryResultOnIdle<undefined>;

PR Checklist

• [x] I read and included theses actions below

1. I have read the Contributing Guide
2. I have written documents and tests, if needed.

[netlify[bot]]

✅ Deploy Preview for slash-libraries ready!

Name	Link
🔨 Latest commit	948e6d644c9bffce0f2236dfaed8482fa4937016
🔍 Latest deploy log	https://app.netlify.com/sites/slash-libraries/deploys/635794647fe928000917e27b
😎 Deploy Preview	https://deploy-preview-73--slash-libraries.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[changyoungoh]

Thanks @manudeli ! Actually, I was planning to adopt tsd for testing complex types like this.

If you like, you can do this in this PR, or I will do it someday later. What do you say?

[manudeli]

Thanks @manudeli ! Actually, I was planning to adopt tsd for testing complex types like this.

If you like, you can do this in this PR, or I will do it someday later. What do you say?

I really want to add tsd's code for testing these types by myself👌~ if I can but, How about new Pull Request to install tsd for whole monorepo like shopify/quilt and to test these types after this PR merging

I want to check your meaning

1. Is it your meaning? that I can install SamVerschueren/tsd into whole monorepo dependencies of @toss/slash and setup tsd to test whole project like @shopify/quilt?

2. If I can make new PR to set up tsd to this project, Could I make an issue before new Pull Request if I can make new PR? Actually I haven't setup or use tsd so I will take time to check how to set up tsd in this project. but when I checked tsd's document, if setup is finished, Maybe I can use tsd's grammer easily to test types

[changyoungoh]

@manudeli I think you're right about seprating to next PR.

And yes, you can open an issue, and you can setup up tsd tests in whole monorepo. But with bottom-up approach, how about adopting tsd only in @tossteam/react-query first and do the whole thing later?

[manudeli]

@manudeli I think you're right about seprating to next PR.

And yes, you can open an issue, and you can setup up tsd tests in whole monorepo. But with bottom-up approach, how about adopting tsd only in @tossteam/react-query first and do the whole thing later?

Ok, I will make an issue for plan to setup tsd on @toss/react-query first.