feat(select): defer TData inference#5040

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.

Sign up for GitHub

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

Merged
TkDodo merged 10 commits into from
Feb 26, 2023
Merged

feat(select): defer TData inference #5040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
630a7f2
feat(select): defer TData inference
ecyrbe Feb 26, 2023
d44b7d2
test(select): restore test
ecyrbe Feb 26, 2023
51f2158
fix(select): change InfiniteQuery Observer definition
ecyrbe Feb 26, 2023
fcd3cba
fix(infinite-queries): fix solid type inference select
ecyrbe Feb 26, 2023
e8e43c3
fix(infinite-queries): fix solid type inference select
ecyrbe Feb 26, 2023
08501ea
chore(infinite-queries): fix prettier
ecyrbe Feb 26, 2023
736173e
fix(infinite-queries): fix vue and svelte types
ecyrbe Feb 26, 2023
8a0bfde
fix(infinite-queries): fix react type inference select
ecyrbe Feb 26, 2023
c838e0b
chore(infinite-queries): fix imports
ecyrbe Feb 26, 2023
942c584
style: fix prettier warnings
ecyrbe Feb 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/query-core/src/infiniteQueryObserver.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
export class InfiniteQueryObserver<
TQueryFnData = unknown,
TError = RegisteredError,
TData = TQueryFnData,
TData = InfiniteData<TQueryFnData>,
TQueryData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
> extends QueryObserver<
TQueryFnData,
TError,
InfiniteData<TData>,
TData,
InfiniteData<TQueryData>,
TQueryKey
> {
Expand Down
8 changes: 4 additions & 4 deletions packages/query-core/src/types.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
> extends QueryObserverOptions<
TQueryFnData,
TError,
InfiniteData<TData>,
TData,
InfiniteData<TQueryData>,
TQueryKey,
TPageParam
Expand DownExpand Up@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
export interface InfiniteQueryObserverBaseResult<
TData = unknown,
TError = RegisteredError,
> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
> extends QueryObserverBaseResult<TData, TError> {
fetchNextPage: (
options?: FetchNextPageOptions,
) => Promise<InfiniteQueryObserverResult<TData, TError>>
Expand DownExpand Up@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
TData = unknown,
TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
data: InfiniteData<TData>
data: TData
error: TError
isError: true
isPending: false
Expand All@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
TData = unknown,
TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
data: InfiniteData<TData>
data: TData
error: null
isError: false
isPending: false
Expand Down
4 changes: 2 additions & 2 deletions packages/react-query/src/__tests__/suspense.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { fireEvent, waitFor } from '@testing-library/react'
import * as React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import type { UseInfiniteQueryResult, UseQueryResult } from '..'
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
import {
QueryCache,
QueryErrorResetBoundary,
Expand DownExpand Up@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {

it('should return the correct states for a successful infinite query', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const [multiplier, setMultiplier] = React.useState(1)
Expand Down
32 changes: 17 additions & 15 deletions packages/react-query/src/__tests__/useInfiniteQuery.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {

it('should return the correct states for a successful query', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand DownExpand Up@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {

it('should keep the previous data when placeholderData is set', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<string>[] = []
const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

function Page() {
const [order, setOrder] = React.useState('desc')
Expand DownExpand Up@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {

it('should be able to select a part of the data', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<string>[] = []
const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand DownExpand Up@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {

it('should be able to select a new result and not cause infinite renders', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
const states: UseInfiniteQueryResult<
InfiniteData<{ count: number; id: number }>
>[] = []
let selectCalled = 0

function Page() {
Expand DownExpand Up@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {

it('should be able to reverse the data', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand DownExpand Up@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {

it('should be able to fetch a previous page', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const start = 10
Expand DownExpand Up@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {

it('should be able to refetch when providing page params automatically', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand DownExpand Up@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {

it('should silently cancel any ongoing fetch when fetching more', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const start = 10
Expand DownExpand Up@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {

it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const start = 10
Expand DownExpand Up@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {

it('should be able to set new pages with the query client', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const [firstPage, setFirstPage] = React.useState(0)
Expand DownExpand Up@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {

it('should only refetch the first page when initialData is provided', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand DownExpand Up@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {

it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand DownExpand Up@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {

it('should compute hasNextPage correctly using initialData', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand DownExpand Up@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {

it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<number>[] = []
const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand DownExpand Up@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {

it('should not use selected data when computing hasNextPage', async () => {
const key = queryKey()
const states: UseInfiniteQueryResult<string>[] = []
const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

function Page() {
const state = useInfiniteQuery({
Expand Down
22 changes: 20 additions & 2 deletions packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useQuery } from '../useQuery'
import type { Expect, Equal } from './utils'
import { doNotExecute } from './utils'
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'

describe('pageParam', () => {
it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
Expand DownExpand Up@@ -62,6 +62,24 @@ describe('pageParam', () => {
})

describe('select', () => {
it('should still return paginated data if no select result', () => {
doNotExecute(() => {
const infiniteQuery = useInfiniteQuery({
queryKey: ['key'],
queryFn: ({ pageParam }) => {
return pageParam * 5
},
defaultPageParam: 1,
getNextPageParam: () => undefined,
})

const result: Expect<
Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
> = true
return result
})
})

it('should be able to transform data to arbitrary result', () => {
doNotExecute(() => {
const infiniteQuery = useInfiniteQuery({
Expand Down
3 changes: 2 additions & 1 deletion packages/react-query/src/useInfiniteQuery.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import type {
QueryKey,
QueryClient,
RegisteredError,
InfiniteData,
} from '@tanstack/query-core'
import { InfiniteQueryObserver } from '@tanstack/query-core'
import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
Expand All@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
export function useInfiniteQuery<
TQueryFnData,
TError = RegisteredError,
TData = TQueryFnData,
TData = InfiniteData<TQueryFnData>,
TQueryKey extends QueryKey = QueryKey,
TPageParam = unknown,
>(
Expand Down
33 changes: 17 additions & 16 deletions packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {

it('should return the correct states for a successful query', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {

it('should keep the previous data when placeholderData is set', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<string>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

function Page() {
const [order, setOrder] = createSignal('desc')
Expand DownExpand Up@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {

it('should be able to select a part of the data', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<string>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {

it('should be able to select a new result and not cause infinite renders', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
[]
const states: CreateInfiniteQueryResult<
InfiniteData<{ count: number; id: number }>
>[] = []
let selectCalled = 0

function Page() {
Expand DownExpand Up@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {

it('should be able to reverse the data', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {

it('should be able to fetch a previous page', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const start = 10
Expand DownExpand Up@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {

it('should be able to refetch when providing page params automatically', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {

it('should silently cancel any ongoing fetch when fetching more', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const start = 10
Expand DownExpand Up@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {

it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const start = 10
Expand DownExpand Up@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {

it('should be able to set new pages with the query client', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const [firstPage, setFirstPage] = createSignal(0)
Expand DownExpand Up@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {

it('should only refetch the first page when initialData is provided', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {

it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {

it('should compute hasNextPage correctly using initialData', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {

it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<number>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {

it('should not use selected data when computing hasNextPage', async () => {
const key = queryKey()
const states: CreateInfiniteQueryResult<string>[] = []
const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

function Page() {
const state = createInfiniteQuery(() => ({
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(select): defer TData inference#5040

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.

 Sign up for GitHub

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

 Merged

TkDodo
merged 10 commits into

from

Feb 26, 2023
 Merged


feat(select): defer TData inference
#5040
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
630a7f2

feat(select): defer TData inference


ecyrbe Feb 26, 2023
d44b7d2

test(select): restore test


ecyrbe Feb 26, 2023
51f2158

fix(select): change InfiniteQuery Observer definition


ecyrbe Feb 26, 2023
fcd3cba

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
e8e43c3

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
08501ea

chore(infinite-queries): fix prettier


ecyrbe Feb 26, 2023
736173e

fix(infinite-queries): fix vue and svelte types


ecyrbe Feb 26, 2023
8a0bfde

fix(infinite-queries): fix react type inference select


ecyrbe Feb 26, 2023
c838e0b

chore(infinite-queries): fix imports


ecyrbe Feb 26, 2023
942c584

style: fix prettier warnings


ecyrbe Feb 26, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
packages/query-core/src/infiniteQueryObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
export class InfiniteQueryObserver<
 TQueryFnData = unknown,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryData = TQueryFnData,
 TQueryKey extends QueryKey = QueryKey,
> extends QueryObserver<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey
> {
Expand Down

8 changes: 4 additions & 4 deletions
packages/query-core/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
> extends QueryObserverOptions<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey,
 TPageParam
Expand DownExpand Up@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
export interface InfiniteQueryObserverBaseResult<
 TData = unknown,
 TError = RegisteredError,
> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
> extends QueryObserverBaseResult<TData, TError> {
 fetchNextPage: (
 options?: FetchNextPageOptions,
 ) => Promise<InfiniteQueryObserverResult<TData, TError>>
Expand DownExpand Up@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: TError
 isError: true
 isPending: false
Expand All@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: null
 isError: false
 isPending: false
Expand Down

4 changes: 2 additions & 2 deletions
packages/react-query/src/__tests__/suspense.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { fireEvent, waitFor } from '@testing-library/react'
import * as React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import type { UseInfiniteQueryResult, UseQueryResult } from '..'
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
import {
 QueryCache,
 QueryErrorResetBoundary,
Expand DownExpand Up@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {

 it('should return the correct states for a successful infinite query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [multiplier, setMultiplier] = React.useState(1)
Expand Down

32 changes: 17 additions & 15 deletions
packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = React.useState('desc')
Expand DownExpand Up@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
 const states: UseInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = React.useState(0)
Expand DownExpand Up@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand Down

22 changes: 20 additions & 2 deletions
packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useQuery } from '../useQuery'
import type { Expect, Equal } from './utils'
import { doNotExecute } from './utils'
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'

describe('pageParam', () => {
 it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
Expand DownExpand Up@@ -62,6 +62,24 @@ describe('pageParam', () => {
})

describe('select', () => {
 it('should still return paginated data if no select result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
 queryKey: ['key'],
 queryFn: ({ pageParam }) => {
 return pageParam * 5
 },
 defaultPageParam: 1,
 getNextPageParam: () => undefined,
 })

 const result: Expect<
 Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
 > = true
 return result
 })
 })

 it('should be able to transform data to arbitrary result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
Expand Down

3 changes: 2 additions & 1 deletion
packages/react-query/src/useInfiniteQuery.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import type {
 QueryKey,
 QueryClient,
 RegisteredError,
 InfiniteData,
} from '@tanstack/query-core'
import { InfiniteQueryObserver } from '@tanstack/query-core'
import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
Expand All@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
export function useInfiniteQuery<
 TQueryFnData,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryKey extends QueryKey = QueryKey,
 TPageParam = unknown,
>(
Expand Down

33 changes: 17 additions & 16 deletions
packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = createSignal('desc')
Expand DownExpand Up@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
 []
 const states: CreateInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = createSignal(0)
Expand DownExpand Up@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(select): defer TData inference#5040

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.

 Sign up for GitHub

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

 Merged

TkDodo
merged 10 commits into

from

Feb 26, 2023
 Merged


feat(select): defer TData inference
#5040
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
630a7f2

feat(select): defer TData inference


ecyrbe Feb 26, 2023
d44b7d2

test(select): restore test


ecyrbe Feb 26, 2023
51f2158

fix(select): change InfiniteQuery Observer definition


ecyrbe Feb 26, 2023
fcd3cba

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
e8e43c3

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
08501ea

chore(infinite-queries): fix prettier


ecyrbe Feb 26, 2023
736173e

fix(infinite-queries): fix vue and svelte types


ecyrbe Feb 26, 2023
8a0bfde

fix(infinite-queries): fix react type inference select


ecyrbe Feb 26, 2023
c838e0b

chore(infinite-queries): fix imports


ecyrbe Feb 26, 2023
942c584

style: fix prettier warnings


ecyrbe Feb 26, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
packages/query-core/src/infiniteQueryObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
export class InfiniteQueryObserver<
 TQueryFnData = unknown,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryData = TQueryFnData,
 TQueryKey extends QueryKey = QueryKey,
> extends QueryObserver<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey
> {
Expand Down

8 changes: 4 additions & 4 deletions
packages/query-core/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
> extends QueryObserverOptions<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey,
 TPageParam
Expand DownExpand Up@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
export interface InfiniteQueryObserverBaseResult<
 TData = unknown,
 TError = RegisteredError,
> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
> extends QueryObserverBaseResult<TData, TError> {
 fetchNextPage: (
 options?: FetchNextPageOptions,
 ) => Promise<InfiniteQueryObserverResult<TData, TError>>
Expand DownExpand Up@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: TError
 isError: true
 isPending: false
Expand All@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: null
 isError: false
 isPending: false
Expand Down

4 changes: 2 additions & 2 deletions
packages/react-query/src/__tests__/suspense.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { fireEvent, waitFor } from '@testing-library/react'
import * as React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import type { UseInfiniteQueryResult, UseQueryResult } from '..'
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
import {
 QueryCache,
 QueryErrorResetBoundary,
Expand DownExpand Up@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {

 it('should return the correct states for a successful infinite query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [multiplier, setMultiplier] = React.useState(1)
Expand Down

32 changes: 17 additions & 15 deletions
packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = React.useState('desc')
Expand DownExpand Up@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
 const states: UseInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = React.useState(0)
Expand DownExpand Up@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand Down

22 changes: 20 additions & 2 deletions
packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useQuery } from '../useQuery'
import type { Expect, Equal } from './utils'
import { doNotExecute } from './utils'
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'

describe('pageParam', () => {
 it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
Expand DownExpand Up@@ -62,6 +62,24 @@ describe('pageParam', () => {
})

describe('select', () => {
 it('should still return paginated data if no select result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
 queryKey: ['key'],
 queryFn: ({ pageParam }) => {
 return pageParam * 5
 },
 defaultPageParam: 1,
 getNextPageParam: () => undefined,
 })

 const result: Expect<
 Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
 > = true
 return result
 })
 })

 it('should be able to transform data to arbitrary result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
Expand Down

3 changes: 2 additions & 1 deletion
packages/react-query/src/useInfiniteQuery.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import type {
 QueryKey,
 QueryClient,
 RegisteredError,
 InfiniteData,
} from '@tanstack/query-core'
import { InfiniteQueryObserver } from '@tanstack/query-core'
import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
Expand All@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
export function useInfiniteQuery<
 TQueryFnData,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryKey extends QueryKey = QueryKey,
 TPageParam = unknown,
>(
Expand Down

33 changes: 17 additions & 16 deletions
packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = createSignal('desc')
Expand DownExpand Up@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
 []
 const states: CreateInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = createSignal(0)
Expand DownExpand Up@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(select): defer TData inference#5040

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.

 Sign up for GitHub

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

 Merged

TkDodo
merged 10 commits into

from

Feb 26, 2023
 Merged


feat(select): defer TData inference
#5040
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
630a7f2

feat(select): defer TData inference


ecyrbe Feb 26, 2023
d44b7d2

test(select): restore test


ecyrbe Feb 26, 2023
51f2158

fix(select): change InfiniteQuery Observer definition


ecyrbe Feb 26, 2023
fcd3cba

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
e8e43c3

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
08501ea

chore(infinite-queries): fix prettier


ecyrbe Feb 26, 2023
736173e

fix(infinite-queries): fix vue and svelte types


ecyrbe Feb 26, 2023
8a0bfde

fix(infinite-queries): fix react type inference select


ecyrbe Feb 26, 2023
c838e0b

chore(infinite-queries): fix imports


ecyrbe Feb 26, 2023
942c584

style: fix prettier warnings


ecyrbe Feb 26, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
packages/query-core/src/infiniteQueryObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
export class InfiniteQueryObserver<
 TQueryFnData = unknown,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryData = TQueryFnData,
 TQueryKey extends QueryKey = QueryKey,
> extends QueryObserver<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey
> {
Expand Down

8 changes: 4 additions & 4 deletions
packages/query-core/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
> extends QueryObserverOptions<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey,
 TPageParam
Expand DownExpand Up@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
export interface InfiniteQueryObserverBaseResult<
 TData = unknown,
 TError = RegisteredError,
> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
> extends QueryObserverBaseResult<TData, TError> {
 fetchNextPage: (
 options?: FetchNextPageOptions,
 ) => Promise<InfiniteQueryObserverResult<TData, TError>>
Expand DownExpand Up@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: TError
 isError: true
 isPending: false
Expand All@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: null
 isError: false
 isPending: false
Expand Down

4 changes: 2 additions & 2 deletions
packages/react-query/src/__tests__/suspense.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { fireEvent, waitFor } from '@testing-library/react'
import * as React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import type { UseInfiniteQueryResult, UseQueryResult } from '..'
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
import {
 QueryCache,
 QueryErrorResetBoundary,
Expand DownExpand Up@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {

 it('should return the correct states for a successful infinite query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [multiplier, setMultiplier] = React.useState(1)
Expand Down

32 changes: 17 additions & 15 deletions
packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = React.useState('desc')
Expand DownExpand Up@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
 const states: UseInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = React.useState(0)
Expand DownExpand Up@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand Down

22 changes: 20 additions & 2 deletions
packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useQuery } from '../useQuery'
import type { Expect, Equal } from './utils'
import { doNotExecute } from './utils'
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'

describe('pageParam', () => {
 it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
Expand DownExpand Up@@ -62,6 +62,24 @@ describe('pageParam', () => {
})

describe('select', () => {
 it('should still return paginated data if no select result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
 queryKey: ['key'],
 queryFn: ({ pageParam }) => {
 return pageParam * 5
 },
 defaultPageParam: 1,
 getNextPageParam: () => undefined,
 })

 const result: Expect<
 Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
 > = true
 return result
 })
 })

 it('should be able to transform data to arbitrary result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
Expand Down

3 changes: 2 additions & 1 deletion
packages/react-query/src/useInfiniteQuery.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import type {
 QueryKey,
 QueryClient,
 RegisteredError,
 InfiniteData,
} from '@tanstack/query-core'
import { InfiniteQueryObserver } from '@tanstack/query-core'
import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
Expand All@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
export function useInfiniteQuery<
 TQueryFnData,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryKey extends QueryKey = QueryKey,
 TPageParam = unknown,
>(
Expand Down

33 changes: 17 additions & 16 deletions
packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = createSignal('desc')
Expand DownExpand Up@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
 []
 const states: CreateInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = createSignal(0)
Expand DownExpand Up@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(select): defer TData inference#5040

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.

 Sign up for GitHub

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

 Merged

TkDodo
merged 10 commits into

from

Feb 26, 2023
 Merged


feat(select): defer TData inference
#5040
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
630a7f2

feat(select): defer TData inference


ecyrbe Feb 26, 2023
d44b7d2

test(select): restore test


ecyrbe Feb 26, 2023
51f2158

fix(select): change InfiniteQuery Observer definition


ecyrbe Feb 26, 2023
fcd3cba

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
e8e43c3

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
08501ea

chore(infinite-queries): fix prettier


ecyrbe Feb 26, 2023
736173e

fix(infinite-queries): fix vue and svelte types


ecyrbe Feb 26, 2023
8a0bfde

fix(infinite-queries): fix react type inference select


ecyrbe Feb 26, 2023
c838e0b

chore(infinite-queries): fix imports


ecyrbe Feb 26, 2023
942c584

style: fix prettier warnings


ecyrbe Feb 26, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
packages/query-core/src/infiniteQueryObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
export class InfiniteQueryObserver<
 TQueryFnData = unknown,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryData = TQueryFnData,
 TQueryKey extends QueryKey = QueryKey,
> extends QueryObserver<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey
> {
Expand Down

8 changes: 4 additions & 4 deletions
packages/query-core/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
> extends QueryObserverOptions<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey,
 TPageParam
Expand DownExpand Up@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
export interface InfiniteQueryObserverBaseResult<
 TData = unknown,
 TError = RegisteredError,
> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
> extends QueryObserverBaseResult<TData, TError> {
 fetchNextPage: (
 options?: FetchNextPageOptions,
 ) => Promise<InfiniteQueryObserverResult<TData, TError>>
Expand DownExpand Up@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: TError
 isError: true
 isPending: false
Expand All@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: null
 isError: false
 isPending: false
Expand Down

4 changes: 2 additions & 2 deletions
packages/react-query/src/__tests__/suspense.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { fireEvent, waitFor } from '@testing-library/react'
import * as React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import type { UseInfiniteQueryResult, UseQueryResult } from '..'
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
import {
 QueryCache,
 QueryErrorResetBoundary,
Expand DownExpand Up@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {

 it('should return the correct states for a successful infinite query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [multiplier, setMultiplier] = React.useState(1)
Expand Down

32 changes: 17 additions & 15 deletions
packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = React.useState('desc')
Expand DownExpand Up@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
 const states: UseInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = React.useState(0)
Expand DownExpand Up@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand Down

22 changes: 20 additions & 2 deletions
packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useQuery } from '../useQuery'
import type { Expect, Equal } from './utils'
import { doNotExecute } from './utils'
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'

describe('pageParam', () => {
 it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
Expand DownExpand Up@@ -62,6 +62,24 @@ describe('pageParam', () => {
})

describe('select', () => {
 it('should still return paginated data if no select result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
 queryKey: ['key'],
 queryFn: ({ pageParam }) => {
 return pageParam * 5
 },
 defaultPageParam: 1,
 getNextPageParam: () => undefined,
 })

 const result: Expect<
 Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
 > = true
 return result
 })
 })

 it('should be able to transform data to arbitrary result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
Expand Down

3 changes: 2 additions & 1 deletion
packages/react-query/src/useInfiniteQuery.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import type {
 QueryKey,
 QueryClient,
 RegisteredError,
 InfiniteData,
} from '@tanstack/query-core'
import { InfiniteQueryObserver } from '@tanstack/query-core'
import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
Expand All@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
export function useInfiniteQuery<
 TQueryFnData,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryKey extends QueryKey = QueryKey,
 TPageParam = unknown,
>(
Expand Down

33 changes: 17 additions & 16 deletions
packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = createSignal('desc')
Expand DownExpand Up@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
 []
 const states: CreateInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = createSignal(0)
Expand DownExpand Up@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(select): defer TData inference#5040

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.

 Sign up for GitHub

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

 Merged

TkDodo
merged 10 commits into

from

Feb 26, 2023
 Merged


feat(select): defer TData inference
#5040
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
630a7f2

feat(select): defer TData inference


ecyrbe Feb 26, 2023
d44b7d2

test(select): restore test


ecyrbe Feb 26, 2023
51f2158

fix(select): change InfiniteQuery Observer definition


ecyrbe Feb 26, 2023
fcd3cba

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
e8e43c3

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
08501ea

chore(infinite-queries): fix prettier


ecyrbe Feb 26, 2023
736173e

fix(infinite-queries): fix vue and svelte types


ecyrbe Feb 26, 2023
8a0bfde

fix(infinite-queries): fix react type inference select


ecyrbe Feb 26, 2023
c838e0b

chore(infinite-queries): fix imports


ecyrbe Feb 26, 2023
942c584

style: fix prettier warnings


ecyrbe Feb 26, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
packages/query-core/src/infiniteQueryObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
export class InfiniteQueryObserver<
 TQueryFnData = unknown,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryData = TQueryFnData,
 TQueryKey extends QueryKey = QueryKey,
> extends QueryObserver<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey
> {
Expand Down

8 changes: 4 additions & 4 deletions
packages/query-core/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
> extends QueryObserverOptions<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey,
 TPageParam
Expand DownExpand Up@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
export interface InfiniteQueryObserverBaseResult<
 TData = unknown,
 TError = RegisteredError,
> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
> extends QueryObserverBaseResult<TData, TError> {
 fetchNextPage: (
 options?: FetchNextPageOptions,
 ) => Promise<InfiniteQueryObserverResult<TData, TError>>
Expand DownExpand Up@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: TError
 isError: true
 isPending: false
Expand All@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: null
 isError: false
 isPending: false
Expand Down

4 changes: 2 additions & 2 deletions
packages/react-query/src/__tests__/suspense.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { fireEvent, waitFor } from '@testing-library/react'
import * as React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import type { UseInfiniteQueryResult, UseQueryResult } from '..'
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
import {
 QueryCache,
 QueryErrorResetBoundary,
Expand DownExpand Up@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {

 it('should return the correct states for a successful infinite query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [multiplier, setMultiplier] = React.useState(1)
Expand Down

32 changes: 17 additions & 15 deletions
packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = React.useState('desc')
Expand DownExpand Up@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
 const states: UseInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = React.useState(0)
Expand DownExpand Up@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand Down

22 changes: 20 additions & 2 deletions
packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useQuery } from '../useQuery'
import type { Expect, Equal } from './utils'
import { doNotExecute } from './utils'
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'

describe('pageParam', () => {
 it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
Expand DownExpand Up@@ -62,6 +62,24 @@ describe('pageParam', () => {
})

describe('select', () => {
 it('should still return paginated data if no select result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
 queryKey: ['key'],
 queryFn: ({ pageParam }) => {
 return pageParam * 5
 },
 defaultPageParam: 1,
 getNextPageParam: () => undefined,
 })

 const result: Expect<
 Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
 > = true
 return result
 })
 })

 it('should be able to transform data to arbitrary result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
Expand Down

3 changes: 2 additions & 1 deletion
packages/react-query/src/useInfiniteQuery.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import type {
 QueryKey,
 QueryClient,
 RegisteredError,
 InfiniteData,
} from '@tanstack/query-core'
import { InfiniteQueryObserver } from '@tanstack/query-core'
import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
Expand All@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
export function useInfiniteQuery<
 TQueryFnData,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryKey extends QueryKey = QueryKey,
 TPageParam = unknown,
>(
Expand Down

33 changes: 17 additions & 16 deletions
packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = createSignal('desc')
Expand DownExpand Up@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
 []
 const states: CreateInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = createSignal(0)
Expand DownExpand Up@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(select): defer TData inference#5040

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.

 Sign up for GitHub

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

 Merged

TkDodo
merged 10 commits into

from

Feb 26, 2023
 Merged


feat(select): defer TData inference
#5040
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
630a7f2

feat(select): defer TData inference


ecyrbe Feb 26, 2023
d44b7d2

test(select): restore test


ecyrbe Feb 26, 2023
51f2158

fix(select): change InfiniteQuery Observer definition


ecyrbe Feb 26, 2023
fcd3cba

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
e8e43c3

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
08501ea

chore(infinite-queries): fix prettier


ecyrbe Feb 26, 2023
736173e

fix(infinite-queries): fix vue and svelte types


ecyrbe Feb 26, 2023
8a0bfde

fix(infinite-queries): fix react type inference select


ecyrbe Feb 26, 2023
c838e0b

chore(infinite-queries): fix imports


ecyrbe Feb 26, 2023
942c584

style: fix prettier warnings


ecyrbe Feb 26, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
packages/query-core/src/infiniteQueryObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
export class InfiniteQueryObserver<
 TQueryFnData = unknown,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryData = TQueryFnData,
 TQueryKey extends QueryKey = QueryKey,
> extends QueryObserver<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey
> {
Expand Down

8 changes: 4 additions & 4 deletions
packages/query-core/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
> extends QueryObserverOptions<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey,
 TPageParam
Expand DownExpand Up@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
export interface InfiniteQueryObserverBaseResult<
 TData = unknown,
 TError = RegisteredError,
> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
> extends QueryObserverBaseResult<TData, TError> {
 fetchNextPage: (
 options?: FetchNextPageOptions,
 ) => Promise<InfiniteQueryObserverResult<TData, TError>>
Expand DownExpand Up@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: TError
 isError: true
 isPending: false
Expand All@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: null
 isError: false
 isPending: false
Expand Down

4 changes: 2 additions & 2 deletions
packages/react-query/src/__tests__/suspense.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { fireEvent, waitFor } from '@testing-library/react'
import * as React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import type { UseInfiniteQueryResult, UseQueryResult } from '..'
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
import {
 QueryCache,
 QueryErrorResetBoundary,
Expand DownExpand Up@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {

 it('should return the correct states for a successful infinite query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [multiplier, setMultiplier] = React.useState(1)
Expand Down

32 changes: 17 additions & 15 deletions
packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = React.useState('desc')
Expand DownExpand Up@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
 const states: UseInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = React.useState(0)
Expand DownExpand Up@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand Down

22 changes: 20 additions & 2 deletions
packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useQuery } from '../useQuery'
import type { Expect, Equal } from './utils'
import { doNotExecute } from './utils'
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'

describe('pageParam', () => {
 it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
Expand DownExpand Up@@ -62,6 +62,24 @@ describe('pageParam', () => {
})

describe('select', () => {
 it('should still return paginated data if no select result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
 queryKey: ['key'],
 queryFn: ({ pageParam }) => {
 return pageParam * 5
 },
 defaultPageParam: 1,
 getNextPageParam: () => undefined,
 })

 const result: Expect<
 Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
 > = true
 return result
 })
 })

 it('should be able to transform data to arbitrary result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
Expand Down

3 changes: 2 additions & 1 deletion
packages/react-query/src/useInfiniteQuery.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import type {
 QueryKey,
 QueryClient,
 RegisteredError,
 InfiniteData,
} from '@tanstack/query-core'
import { InfiniteQueryObserver } from '@tanstack/query-core'
import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
Expand All@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
export function useInfiniteQuery<
 TQueryFnData,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryKey extends QueryKey = QueryKey,
 TPageParam = unknown,
>(
Expand Down

33 changes: 17 additions & 16 deletions
packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = createSignal('desc')
Expand DownExpand Up@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
 []
 const states: CreateInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = createSignal(0)
Expand DownExpand Up@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(select): defer TData inference#5040

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.

 Sign up for GitHub

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

 Merged

TkDodo
merged 10 commits into

from

Feb 26, 2023
 Merged


feat(select): defer TData inference
#5040
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
630a7f2

feat(select): defer TData inference


ecyrbe Feb 26, 2023
d44b7d2

test(select): restore test


ecyrbe Feb 26, 2023
51f2158

fix(select): change InfiniteQuery Observer definition


ecyrbe Feb 26, 2023
fcd3cba

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
e8e43c3

fix(infinite-queries): fix solid type inference select


ecyrbe Feb 26, 2023
08501ea

chore(infinite-queries): fix prettier


ecyrbe Feb 26, 2023
736173e

fix(infinite-queries): fix vue and svelte types


ecyrbe Feb 26, 2023
8a0bfde

fix(infinite-queries): fix react type inference select


ecyrbe Feb 26, 2023
c838e0b

chore(infinite-queries): fix imports


ecyrbe Feb 26, 2023
942c584

style: fix prettier warnings


ecyrbe Feb 26, 2023

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 2 additions & 2 deletions
packages/query-core/src/infiniteQueryObserver.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -25,13 +25,13 @@ type InfiniteQueryObserverListener<TData, TError> = (
export class InfiniteQueryObserver<
 TQueryFnData = unknown,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryData = TQueryFnData,
 TQueryKey extends QueryKey = QueryKey,
> extends QueryObserver<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey
> {
Expand Down

8 changes: 4 additions & 4 deletions
packages/query-core/src/types.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -310,7 +310,7 @@ export interface InfiniteQueryObserverOptions<
> extends QueryObserverOptions<
 TQueryFnData,
 TError,
InfiniteData<TData>,
 TData,
 InfiniteData<TQueryData>,
 TQueryKey,
 TPageParam
Expand DownExpand Up@@ -501,7 +501,7 @@ export type QueryObserverResult<TData = unknown, TError = RegisteredError> =
export interface InfiniteQueryObserverBaseResult<
 TData = unknown,
 TError = RegisteredError,
> extends QueryObserverBaseResult<InfiniteData<TData>, TError> {
> extends QueryObserverBaseResult<TData, TError> {
 fetchNextPage: (
 options?: FetchNextPageOptions,
 ) => Promise<InfiniteQueryObserverResult<TData, TError>>
Expand DownExpand Up@@ -546,7 +546,7 @@ export interface InfiniteQueryObserverRefetchErrorResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: TError
 isError: true
 isPending: false
Expand All@@ -560,7 +560,7 @@ export interface InfiniteQueryObserverSuccessResult<
 TData = unknown,
 TError = RegisteredError,
> extends InfiniteQueryObserverBaseResult<TData, TError> {
 data: InfiniteData<TData>
 data: TData
 error: null
 isError: false
 isPending: false
Expand Down

4 changes: 2 additions & 2 deletions
packages/react-query/src/__tests__/suspense.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { fireEvent, waitFor } from '@testing-library/react'
import * as React from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import type { UseInfiniteQueryResult, UseQueryResult } from '..'
import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..'
import {
 QueryCache,
 QueryErrorResetBoundary,
Expand DownExpand Up@@ -68,7 +68,7 @@ describe("useQuery's in Suspense mode", () => {

 it('should return the correct states for a successful infinite query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [multiplier, setMultiplier] = React.useState(1)
Expand Down

32 changes: 17 additions & 15 deletions
packages/react-query/src/__tests__/useInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -45,7 +45,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -172,7 +172,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = React.useState('desc')
Expand DownExpand Up@@ -268,7 +268,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -305,7 +305,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<{ count: number; id: number }>[] = []
 const states: UseInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -353,7 +355,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -410,7 +412,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -493,7 +495,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -602,7 +604,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -821,7 +823,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -920,7 +922,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = React.useState(0)
Expand DownExpand Up@@ -1002,7 +1004,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1067,7 +1069,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1105,7 +1107,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1144,7 +1146,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<number>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand DownExpand Up@@ -1183,7 +1185,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: UseInfiniteQueryResult<string>[] = []
 const states: UseInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = useInfiniteQuery({
Expand Down

22 changes: 20 additions & 2 deletions
packages/react-query/src/__tests__/useInfiniteQuery.type.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'
import { useInfiniteQuery } from '../useInfiniteQuery'
import { useQuery } from '../useQuery'
import type { Expect, Equal } from './utils'
import { doNotExecute } from './utils'
import type { InfiniteData } from '@tanstack/query-core'
import { QueryClient } from '@tanstack/query-core'

describe('pageParam', () => {
 it('defaultPageParam should define type of param passed to queryFunctionContext', () => {
Expand DownExpand Up@@ -62,6 +62,24 @@ describe('pageParam', () => {
})

describe('select', () => {
 it('should still return paginated data if no select result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
 queryKey: ['key'],
 queryFn: ({ pageParam }) => {
 return pageParam * 5
 },
 defaultPageParam: 1,
 getNextPageParam: () => undefined,
 })

 const result: Expect<
 Equal<InfiniteData<number> | undefined, (typeof infiniteQuery)['data']>
 > = true
 return result
 })
 })

 it('should be able to transform data to arbitrary result', () => {
 doNotExecute(() => {
 const infiniteQuery = useInfiniteQuery({
Expand Down

3 changes: 2 additions & 1 deletion
packages/react-query/src/useInfiniteQuery.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -3,6 +3,7 @@ import type {
 QueryKey,
 QueryClient,
 RegisteredError,
 InfiniteData,
} from '@tanstack/query-core'
import { InfiniteQueryObserver } from '@tanstack/query-core'
import type { UseInfiniteQueryOptions, UseInfiniteQueryResult } from './types'
Expand All@@ -12,7 +13,7 @@ import { useBaseQuery } from './useBaseQuery'
export function useInfiniteQuery<
 TQueryFnData,
 TError = RegisteredError,
 TData = TQueryFnData,
 TData = InfiniteData<TQueryFnData>,
 TQueryKey extends QueryKey = QueryKey,
 TPageParam = unknown,
>(
Expand Down

33 changes: 17 additions & 16 deletions
packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -54,7 +54,7 @@ describe('useInfiniteQuery', () => {

 it('should return the correct states for a successful query', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -191,7 +191,7 @@ describe('useInfiniteQuery', () => {

 it('should keep the previous data when placeholderData is set', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const [order, setOrder] = createSignal('desc')
Expand DownExpand Up@@ -286,7 +286,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a part of the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -326,8 +326,9 @@ describe('useInfiniteQuery', () => {

 it('should be able to select a new result and not cause infinite renders', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<{ count: number; id: number }>[] =
 []
 const states: CreateInfiniteQueryResult<
 InfiniteData<{ count: number; id: number }>
 >[] = []
 let selectCalled = 0

 function Page() {
Expand DownExpand Up@@ -372,7 +373,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to reverse the data', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -436,7 +437,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to fetch a previous page', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -515,7 +516,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to refetch when providing page params automatically', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -629,7 +630,7 @@ describe('useInfiniteQuery', () => {

 it('should silently cancel any ongoing fetch when fetching more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -865,7 +866,7 @@ describe('useInfiniteQuery', () => {

 it('should keep fetching first page when not loaded yet and triggering fetch more', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const start = 10
Expand DownExpand Up@@ -975,7 +976,7 @@ describe('useInfiniteQuery', () => {

 it('should be able to set new pages with the query client', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const [firstPage, setFirstPage] = createSignal(0)
Expand DownExpand Up@@ -1063,7 +1064,7 @@ describe('useInfiniteQuery', () => {

 it('should only refetch the first page when initialData is provided', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1134,7 +1135,7 @@ describe('useInfiniteQuery', () => {

 it('should set hasNextPage to false if getNextPageParam returns undefined', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1178,7 +1179,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1222,7 +1223,7 @@ describe('useInfiniteQuery', () => {

 it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<number>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<number>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand DownExpand Up@@ -1266,7 +1267,7 @@ describe('useInfiniteQuery', () => {

 it('should not use selected data when computing hasNextPage', async () => {
 const key = queryKey()
 const states: CreateInfiniteQueryResult<string>[] = []
 const states: CreateInfiniteQueryResult<InfiniteData<string>>[] = []

 function Page() {
 const state = createInfiniteQuery(() => ({
Expand Down
Loading