Skip to content

refactor: improve type safety in getQueryData by using generics #9218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

braden-w
Copy link
Contributor

Refactored the getQueryData method in QueryClient to use generics for type inference instead of type assertion with as.

The previous implementation of getQueryData relied on a type assertion (as) to cast the result of queryCache.get():

    return this.#queryCache.get(options.queryHash)?.state.data as
      | TInferredQueryFnData
      | undefined

While this works, using generics is a more type-safe and idiomatic approach in TypeScript. It allows the type system to infer the correct type for TInferredQueryFnData when queryCache.get is called, reducing the need for manual type casting and potential runtime errors if the cast is incorrect.

Changes

The getQueryData method has been updated to pass TInferredQueryFnData as a generic type argument to this.#queryCache.get():

Before:

    return this.#queryCache.get(options.queryHash)?.state.data as
      | TInferredQueryFnData
      | undefined

After:

    return this.#queryCache.get<TInferredQueryFnData>(options.queryHash)?.state
      .data

This change leverages the existing generic type parameter TInferredQueryFnData already defined in the getQueryData signature and QueryCache#get method.

Refactored the `getQueryData` method in `QueryClient` to use generics for type inference instead of type assertion with `as`.

The previous implementation of `getQueryData` relied on a type assertion (`as`) to cast the result of `queryCache.get()`:

```typescript
    return this.#queryCache.get(options.queryHash)?.state.data as
      | TInferredQueryFnData
      | undefined
```

While this works, using generics is a more type-safe and idiomatic approach in TypeScript. It allows the type system to infer the correct type for `TInferredQueryFnData` when `queryCache.get` is called, reducing the need for manual type casting and potential runtime errors if the cast is incorrect.

## Changes

The `getQueryData` method has been updated to pass `TInferredQueryFnData` as a generic type argument to `this.#queryCache.get()`:

**Before:**

```typescript
    return this.#queryCache.get(options.queryHash)?.state.data as
      | TInferredQueryFnData
      | undefined
```

**After:**

```typescript
    return this.#queryCache.get<TInferredQueryFnData>(options.queryHash)?.state
      .data
```

This change leverages the existing generic type parameter `TInferredQueryFnData` already defined in the `getQueryData` signature and `QueryCache#get` method.
Copy link

nx-cloud bot commented May 29, 2025

View your CI Pipeline Execution ↗ for commit 1b78c8b.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 4m 41s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 45s View ↗

☁️ Nx Cloud last updated this comment at 2025-05-29 18:07:28 UTC

Copy link

pkg-pr-new bot commented May 29, 2025

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9218

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9218

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9218

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9218

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9218

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9218

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9218

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9218

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9218

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9218

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9218

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9218

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9218

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9218

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9218

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9218

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9218

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9218

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9218

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9218

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9218

commit: 1b78c8b

Copy link

codecov bot commented May 29, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 59.63%. Comparing base (b475d21) to head (1b78c8b).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #9218       +/-   ##
===========================================
+ Coverage   45.30%   59.63%   +14.32%     
===========================================
  Files         209      138       -71     
  Lines        8257     5495     -2762     
  Branches     1856     1471      -385     
===========================================
- Hits         3741     3277      -464     
+ Misses       4076     1921     -2155     
+ Partials      440      297      -143     
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 85.04% <ø> (ø)
@tanstack/eslint-plugin-query ∅ <ø> (∅)
@tanstack/query-async-storage-persister 43.85% <ø> (ø)
@tanstack/query-broadcast-client-experimental 24.39% <ø> (ø)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core 98.13% <100.00%> (ø)
@tanstack/query-devtools 3.56% <ø> (ø)
@tanstack/query-persist-client-core 78.32% <ø> (ø)
@tanstack/query-sync-storage-persister 84.61% <ø> (ø)
@tanstack/query-test-utils ∅ <ø> (∅)
@tanstack/react-query 96.02% <ø> (ø)
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client 100.00% <ø> (ø)
@tanstack/solid-query 78.20% <ø> (ø)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client 100.00% <ø> (ø)
@tanstack/svelte-query 88.15% <ø> (ø)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client 100.00% <ø> (ø)
@tanstack/vue-query 70.85% <ø> (ø)
@tanstack/vue-query-devtools ∅ <ø> (∅)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant