Added a proof of concept for initialData making TData never undefined

[mattpocock]

closes #3310

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
query	✅ Ready (Inspect)	Visit Preview	Jul 16, 2022 at 11:31AM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 260175b:

Sandbox	Source
@tanstack/query-example-react-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration

[codecov-commenter]

Codecov Report

Merging #3834 (260175b) into beta (e0aad73) will decrease coverage by 0.29%.
The diff coverage is 93.26%.

@@            Coverage Diff             @@
##             beta    #3834      +/-   ##
==========================================
- Coverage   97.11%   96.81%   -0.30%     
==========================================
  Files          50       57       +7     
  Lines        2391     2671     +280     
  Branches      706      786      +80     
==========================================
+ Hits         2322     2586     +264     
- Misses         67       83      +16     
  Partials        2        2              

Impacted Files	Coverage Δ
packages/query-core/src/infiniteQueryObserver.ts	100.00% <ø> (ø)
packages/query-core/src/logger.ts	100.00% <ø> (ø)
packages/react-query-devtools/src/Logo.tsx	100.00% <ø> (ø)
...kages/react-query-devtools/src/styledComponents.ts	92.30% <ø> (ø)
packages/react-query-devtools/src/theme.tsx	100.00% <ø> (ø)
packages/react-query-devtools/src/useMediaQuery.ts	92.30% <ø> (ø)
...-persist-client/src/PersistQueryClientProvider.tsx	100.00% <ø> (ø)
packages/react-query-persist-client/src/persist.ts	92.85% <ø> (ø)
...ages/react-query/codemods/v4/key-transformation.js	97.36% <ø> (ø)
packages/react-query/codemods/v4/utils/index.js	98.50% <ø> (ø)
... and 67 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3a02dbb...260175b. Read the comment docs.

[TkDodo]

@all-contributors add @mattpocock for code

[Alcas1]

Is this going to be in V3 as well or only for V4?

[TkDodo]

@Alcas1 only on v4. please see the issue description for the reasoning behind this:

• better type narrowing for initialData #3310

[Console-buche]

nothing (mistake)

[moris-moze]

@TkDodo Hi, in what specific v4 version is this available? I've updated to [4.0.0-beta.23], but the data type still remains T | undefined. Thanks

Code example:

export const useRoles = <T>(select?: (data: RoleResponseDto[]) => T) =>
  useQuery<RoleResponseDto[], unknown, T>({
    queryKey: [QueryClientKeys.GET_ROLES],
    queryFn: async () => {
      const response = await http.get<
        RoleResponseDto[],
        AxiosResponse<RoleResponseDto[]>
      >(`api_path`);

      return response.data;
    },
    staleTime: Infinity,
    select: select,
    initialData: [],
  });

[TkDodo]

just use latest v4 ?

[moris-moze]

@TkDodo Looking at https://www.npmjs.com/package/react-query?activeTab=versions, 4.0.0-beta.23 seems to be the latest?

[TkDodo]

the package is @tanstack/react-query:

https://www.npmjs.com/package/@tanstack/react-query

[moris-moze]

@TkDodo Is it possible to make a query run only once, while having initialData set and staleTime set to Infinity?

E.g.:

export const useAllUsers = () =>
  useQuery<UserResponseDto[]>({
    queryKey: [QueryClientKeys.GET_ALL_USERS],
    queryFn: async () => {
      const response = await http.get<
        UserResponseDto[],
        AxiosResponse<UserResponseDto[]>
      >(`${API_BASE}/api/user/all`);
      return response.data;
    },
    staleTime: Infinity,
    initialData: [],
  });

The goal here is not to have possibly undefined data, hence the initialData. Besides that, I want to run the query only once so there's the staleTime: Infinity. This obviously can't work since query has initial data and stale time is infinite, so there is no triggering of the queryFn. Is there a way around this?

[TkDodo]

@TkDodo Is it possible to make a query run only once, while having initialData set and staleTime set to Infinity?

maybe with refetchOnMount: 'always' ? But it will fetch whenever a new observer mounts