Feature/infinite queries - #5004

Merged
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries
Feb 27, 2023
Merged

Feature/infinite queries#5004
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries

Conversation

@TkDodo

Copy link
Copy Markdown
Collaborator

No description provided.

@vercel

vercelBot commented Feb 19, 2023

Copy link
Copy Markdown

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

1 Ignored Deployment
NameStatusPreviewCommentsUpdated
query⬜️ Ignored (Inspect)Feb 27, 2023 at 9:34AM (UTC)

@codesandbox-ci

codesandbox-ciBot commented Feb 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

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

Latest deployment of this branch, based on commit 3bb0c34:

SandboxSource
@tanstack/query-example-react-basic-typescriptConfiguration
@tanstack/query-example-solid-basic-typescriptConfiguration
@tanstack/query-example-svelte-basicConfiguration
@tanstack/query-example-vue-basicConfiguration

@codecov-commenter

codecov-commenter commented Feb 19, 2023

Copy link
Copy Markdown

Codecov Report

Base: 90.50% // Head: 90.41% // Decreases project coverage by -0.09%⚠️

Coverage data is based on head (3bb0c34) compared to base (ca2f697).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files
@@ Coverage Diff @@## alpha #5004 +/- ##
==========================================
- Coverage 90.50% 90.41% -0.09% 
==========================================
Files 104 104 Lines 3811 3788 -23 Branches 961 948 -13 ==========================================
- Hits 3449 3425 -24 - Misses 329 330 +1 
Partials 33 33 
Impacted FilesCoverage Δ
packages/query-core/src/query.ts99.02% <ø> (ø)
packages/react-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts100.00% <ø> (ø)
packages/svelte-query/src/createInfiniteQuery.ts0.00% <ø> (ø)
packages/vue-query/src/queryClient.ts93.22% <ø> (ø)
packages/vue-query/src/useBaseQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useQuery.ts100.00% <ø> (ø)
packages/query-core/src/infiniteQueryBehavior.ts98.59% <100.00%> (-1.41%)⬇️
packages/query-core/src/infiniteQueryObserver.ts88.46% <100.00%> (-0.43%)⬇️
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

TkDodoand others added 4 commits February 19, 2023 13:29
* feat: add PageParam typing
* feat(infinite-query): more typing
* feat(infinite-query): make pageParam never by defaukt
* feat(infinite-query): PageParam type unknown for infinite queries
* fix(infinite-query): fix tests
* feat(infinite-query): add previous end next return TPageParam type
@TkDodo
TkDodo marked this pull request as ready for review February 19, 2023 15:01
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated

@DamianOsipiukDamianOsipiuk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

Comment threadpackages/query-core/src/types.ts Outdated
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated
because it might be mistaken for a full set of options, which it is not
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@DamianOsipiuk

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

I outlined the problems in the initial RFC. We still need the pageParams to trigger refetches in some cases. As an example, suppose we have the following query:

useInfiniteQuery({
queryKey,
queryFn: ({ pageParam }) => Promise.resolve({ num: pageParam }),
defaultPageParam: 0
getNextPage: (lastPage) => lastPage.num + 1,
getNextPage: (firstPage) => firstPage.num - 1,
})

this will start out with:

{
pages: [{ num: 0 }],
pageParam: [0]
}

now let's fetch some more in the forward direction:

{
pages: [{ num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [0, 1, 2]
}

so far, so good. If a refetch happens now, it always starts at the beginning and then refetches all pages in order. so we:

  • take 0 from the pageParams to initiate the refetches
  • for every subsequent page, we just call getNextPageParam again to re-compute it on the fly.

Now it seems, we could just re-use the defaultPageParam and start with that, but we cannot, for two reasons:

  1. what if we have fetched in the previous direction before, and our state is:
{
pages: [{ num: -1 }, { num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [-1, 0, 1, 2]
}

we now have to start the fetch chain with -1 and not with 0. We only have that info in pageParams.

  1. in the same way, if you use the new pageSize option and set it to 2, you might be in a situation where you no longer have the "initial" page in the cache, we might only have:
{
pages: [{ num: 1 }, { num: 2 }],
pageParam: [1, 2]
}

now, we would have to start with 1.

Grabbing this info from the pageParam works well, but yeah, it's the only reason we have this extra nesting structure :/ It happens right here and is the only place where we need pageParams:

promise=fetchPage([],oldPageParams[0])

Alternatively, we would have to store the information "what's the pageParam of the current first page" somewhere on the query. Would that be better?
I also thought about making defaultPageParam a function that is executed with allPages | undefined, but is there a guarantee that users can always compute that value just from looking at the pages ?

@DamianOsipiuk

Copy link
Copy Markdown
Contributor

@TkDodo But it seems that it's now more like an implementation detail, rather than something users could use.

If it's not usefull for users it would be good to hide this somewhere. And what we really need is something like firstPageParam internally.
Removing pageParams would make using select and cache manipulation easier.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

Base automatically changed from v5 to alphaFebruary 26, 2023 10:01
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

But it seems that it's now more like an implementation detail, rather than something users could use.

yes, I agree.

Removing pageParams would make using select and cache manipulation easier.

cache manipulation, yes. select, kinda. It should be possible to transform to anything via select. it works at runtime, but not on type level. I've added some failing type level tests. I think we should fix them first before changing the structure.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

yes, we would need to store it. it could be part of the query.state, as we store more than just the data anyways:

exportinterfaceQueryState<TData=unknown,TError=RegisteredError>{
data: TData|undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError|null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchFailureReason: TError|null
fetchMeta: any
isInvalidated: boolean
status: QueryStatus
fetchStatus: FetchStatus
}

I will need to look into it. We don't have an infinite version of that query. Maybe storing it on fetchMeta works, idk 😅

@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

hmm, it's mostly an implementation detail, but when working directly with the cache, you'd still need to set it. As an example, assume you have 3 pages:

{
pages: [{}, {}, {}]
pageParams: [5, 10, 15]
}

if we take away pageParams from data and store them somewhere else (on queryState), what happens if you call setQueryData and remove the first page? You will also need to adapt pageParams so that it only contains [10, 15]. We can only do that becausepageParams are part of our Infinite Data structure. So it seems that exactly the use-cases where pageParams becomes annoying are actually the ones that might need it ...

TkDodoand others added 3 commits February 26, 2023 12:00
* feat(select): defer TData inference
* test(select): restore test
* fix(select): change InfiniteQuery Observer definition
* fix(infinite-queries): fix solid type inference select
* fix(infinite-queries): fix solid type inference select
* chore(infinite-queries): fix prettier
* fix(infinite-queries): fix vue and svelte types
* fix(infinite-queries): fix react type inference select
* chore(infinite-queries): fix imports
* style: fix prettier warnings
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@ardeora I'll merge this PR into alpha because it contains some good improvements on the API. If we find a way to get rid of the pageParams as part of data, we can still do this separately.

@TkDodo
TkDodo merged commit 9be63f4 into alphaFeb 27, 2023
@TkDodo
TkDodo deleted the feature/infinite-queries branch February 27, 2023 10:03
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants

@TkDodo@codecov-commenter@DamianOsipiuk@lachlancollins@ecyrbe
, '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

Feature/infinite queries - #5004

Merged
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries
Feb 27, 2023
Merged

Feature/infinite queries#5004
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries

Conversation

@TkDodo

Copy link
Copy Markdown
Collaborator

No description provided.

@vercel

vercelBot commented Feb 19, 2023

Copy link
Copy Markdown

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

1 Ignored Deployment
NameStatusPreviewCommentsUpdated
query⬜️ Ignored (Inspect)Feb 27, 2023 at 9:34AM (UTC)

@codesandbox-ci

codesandbox-ciBot commented Feb 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

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

Latest deployment of this branch, based on commit 3bb0c34:

SandboxSource
@tanstack/query-example-react-basic-typescriptConfiguration
@tanstack/query-example-solid-basic-typescriptConfiguration
@tanstack/query-example-svelte-basicConfiguration
@tanstack/query-example-vue-basicConfiguration

@codecov-commenter

codecov-commenter commented Feb 19, 2023

Copy link
Copy Markdown

Codecov Report

Base: 90.50% // Head: 90.41% // Decreases project coverage by -0.09%⚠️

Coverage data is based on head (3bb0c34) compared to base (ca2f697).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files
@@ Coverage Diff @@## alpha #5004 +/- ##
==========================================
- Coverage 90.50% 90.41% -0.09% 
==========================================
Files 104 104 Lines 3811 3788 -23 Branches 961 948 -13 ==========================================
- Hits 3449 3425 -24 - Misses 329 330 +1 
Partials 33 33 
Impacted FilesCoverage Δ
packages/query-core/src/query.ts99.02% <ø> (ø)
packages/react-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts100.00% <ø> (ø)
packages/svelte-query/src/createInfiniteQuery.ts0.00% <ø> (ø)
packages/vue-query/src/queryClient.ts93.22% <ø> (ø)
packages/vue-query/src/useBaseQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useQuery.ts100.00% <ø> (ø)
packages/query-core/src/infiniteQueryBehavior.ts98.59% <100.00%> (-1.41%)⬇️
packages/query-core/src/infiniteQueryObserver.ts88.46% <100.00%> (-0.43%)⬇️
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

TkDodoand others added 4 commits February 19, 2023 13:29
* feat: add PageParam typing
* feat(infinite-query): more typing
* feat(infinite-query): make pageParam never by defaukt
* feat(infinite-query): PageParam type unknown for infinite queries
* fix(infinite-query): fix tests
* feat(infinite-query): add previous end next return TPageParam type
@TkDodo
TkDodo marked this pull request as ready for review February 19, 2023 15:01
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated

@DamianOsipiukDamianOsipiuk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

Comment threadpackages/query-core/src/types.ts Outdated
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated
because it might be mistaken for a full set of options, which it is not
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@DamianOsipiuk

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

I outlined the problems in the initial RFC. We still need the pageParams to trigger refetches in some cases. As an example, suppose we have the following query:

useInfiniteQuery({
queryKey,
queryFn: ({ pageParam }) => Promise.resolve({ num: pageParam }),
defaultPageParam: 0
getNextPage: (lastPage) => lastPage.num + 1,
getNextPage: (firstPage) => firstPage.num - 1,
})

this will start out with:

{
pages: [{ num: 0 }],
pageParam: [0]
}

now let's fetch some more in the forward direction:

{
pages: [{ num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [0, 1, 2]
}

so far, so good. If a refetch happens now, it always starts at the beginning and then refetches all pages in order. so we:

  • take 0 from the pageParams to initiate the refetches
  • for every subsequent page, we just call getNextPageParam again to re-compute it on the fly.

Now it seems, we could just re-use the defaultPageParam and start with that, but we cannot, for two reasons:

  1. what if we have fetched in the previous direction before, and our state is:
{
pages: [{ num: -1 }, { num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [-1, 0, 1, 2]
}

we now have to start the fetch chain with -1 and not with 0. We only have that info in pageParams.

  1. in the same way, if you use the new pageSize option and set it to 2, you might be in a situation where you no longer have the "initial" page in the cache, we might only have:
{
pages: [{ num: 1 }, { num: 2 }],
pageParam: [1, 2]
}

now, we would have to start with 1.

Grabbing this info from the pageParam works well, but yeah, it's the only reason we have this extra nesting structure :/ It happens right here and is the only place where we need pageParams:

promise=fetchPage([],oldPageParams[0])

Alternatively, we would have to store the information "what's the pageParam of the current first page" somewhere on the query. Would that be better?
I also thought about making defaultPageParam a function that is executed with allPages | undefined, but is there a guarantee that users can always compute that value just from looking at the pages ?

@DamianOsipiuk

Copy link
Copy Markdown
Contributor

@TkDodo But it seems that it's now more like an implementation detail, rather than something users could use.

If it's not usefull for users it would be good to hide this somewhere. And what we really need is something like firstPageParam internally.
Removing pageParams would make using select and cache manipulation easier.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

Base automatically changed from v5 to alphaFebruary 26, 2023 10:01
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

But it seems that it's now more like an implementation detail, rather than something users could use.

yes, I agree.

Removing pageParams would make using select and cache manipulation easier.

cache manipulation, yes. select, kinda. It should be possible to transform to anything via select. it works at runtime, but not on type level. I've added some failing type level tests. I think we should fix them first before changing the structure.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

yes, we would need to store it. it could be part of the query.state, as we store more than just the data anyways:

exportinterfaceQueryState<TData=unknown,TError=RegisteredError>{
data: TData|undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError|null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchFailureReason: TError|null
fetchMeta: any
isInvalidated: boolean
status: QueryStatus
fetchStatus: FetchStatus
}

I will need to look into it. We don't have an infinite version of that query. Maybe storing it on fetchMeta works, idk 😅

@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

hmm, it's mostly an implementation detail, but when working directly with the cache, you'd still need to set it. As an example, assume you have 3 pages:

{
pages: [{}, {}, {}]
pageParams: [5, 10, 15]
}

if we take away pageParams from data and store them somewhere else (on queryState), what happens if you call setQueryData and remove the first page? You will also need to adapt pageParams so that it only contains [10, 15]. We can only do that becausepageParams are part of our Infinite Data structure. So it seems that exactly the use-cases where pageParams becomes annoying are actually the ones that might need it ...

TkDodoand others added 3 commits February 26, 2023 12:00
* feat(select): defer TData inference
* test(select): restore test
* fix(select): change InfiniteQuery Observer definition
* fix(infinite-queries): fix solid type inference select
* fix(infinite-queries): fix solid type inference select
* chore(infinite-queries): fix prettier
* fix(infinite-queries): fix vue and svelte types
* fix(infinite-queries): fix react type inference select
* chore(infinite-queries): fix imports
* style: fix prettier warnings
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@ardeora I'll merge this PR into alpha because it contains some good improvements on the API. If we find a way to get rid of the pageParams as part of data, we can still do this separately.

@TkDodo
TkDodo merged commit 9be63f4 into alphaFeb 27, 2023
@TkDodo
TkDodo deleted the feature/infinite-queries branch February 27, 2023 10:03
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants

@TkDodo@codecov-commenter@DamianOsipiuk@lachlancollins@ecyrbe
, '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

Feature/infinite queries - #5004

Merged
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries
Feb 27, 2023
Merged

Feature/infinite queries#5004
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries

Conversation

@TkDodo

Copy link
Copy Markdown
Collaborator

No description provided.

@vercel

vercelBot commented Feb 19, 2023

Copy link
Copy Markdown

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

1 Ignored Deployment
NameStatusPreviewCommentsUpdated
query⬜️ Ignored (Inspect)Feb 27, 2023 at 9:34AM (UTC)

@codesandbox-ci

codesandbox-ciBot commented Feb 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

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

Latest deployment of this branch, based on commit 3bb0c34:

SandboxSource
@tanstack/query-example-react-basic-typescriptConfiguration
@tanstack/query-example-solid-basic-typescriptConfiguration
@tanstack/query-example-svelte-basicConfiguration
@tanstack/query-example-vue-basicConfiguration

@codecov-commenter

codecov-commenter commented Feb 19, 2023

Copy link
Copy Markdown

Codecov Report

Base: 90.50% // Head: 90.41% // Decreases project coverage by -0.09%⚠️

Coverage data is based on head (3bb0c34) compared to base (ca2f697).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files
@@ Coverage Diff @@## alpha #5004 +/- ##
==========================================
- Coverage 90.50% 90.41% -0.09% 
==========================================
Files 104 104 Lines 3811 3788 -23 Branches 961 948 -13 ==========================================
- Hits 3449 3425 -24 - Misses 329 330 +1 
Partials 33 33 
Impacted FilesCoverage Δ
packages/query-core/src/query.ts99.02% <ø> (ø)
packages/react-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts100.00% <ø> (ø)
packages/svelte-query/src/createInfiniteQuery.ts0.00% <ø> (ø)
packages/vue-query/src/queryClient.ts93.22% <ø> (ø)
packages/vue-query/src/useBaseQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useQuery.ts100.00% <ø> (ø)
packages/query-core/src/infiniteQueryBehavior.ts98.59% <100.00%> (-1.41%)⬇️
packages/query-core/src/infiniteQueryObserver.ts88.46% <100.00%> (-0.43%)⬇️
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

TkDodoand others added 4 commits February 19, 2023 13:29
* feat: add PageParam typing
* feat(infinite-query): more typing
* feat(infinite-query): make pageParam never by defaukt
* feat(infinite-query): PageParam type unknown for infinite queries
* fix(infinite-query): fix tests
* feat(infinite-query): add previous end next return TPageParam type
@TkDodo
TkDodo marked this pull request as ready for review February 19, 2023 15:01
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated

@DamianOsipiukDamianOsipiuk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

Comment threadpackages/query-core/src/types.ts Outdated
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated
because it might be mistaken for a full set of options, which it is not
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@DamianOsipiuk

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

I outlined the problems in the initial RFC. We still need the pageParams to trigger refetches in some cases. As an example, suppose we have the following query:

useInfiniteQuery({
queryKey,
queryFn: ({ pageParam }) => Promise.resolve({ num: pageParam }),
defaultPageParam: 0
getNextPage: (lastPage) => lastPage.num + 1,
getNextPage: (firstPage) => firstPage.num - 1,
})

this will start out with:

{
pages: [{ num: 0 }],
pageParam: [0]
}

now let's fetch some more in the forward direction:

{
pages: [{ num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [0, 1, 2]
}

so far, so good. If a refetch happens now, it always starts at the beginning and then refetches all pages in order. so we:

  • take 0 from the pageParams to initiate the refetches
  • for every subsequent page, we just call getNextPageParam again to re-compute it on the fly.

Now it seems, we could just re-use the defaultPageParam and start with that, but we cannot, for two reasons:

  1. what if we have fetched in the previous direction before, and our state is:
{
pages: [{ num: -1 }, { num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [-1, 0, 1, 2]
}

we now have to start the fetch chain with -1 and not with 0. We only have that info in pageParams.

  1. in the same way, if you use the new pageSize option and set it to 2, you might be in a situation where you no longer have the "initial" page in the cache, we might only have:
{
pages: [{ num: 1 }, { num: 2 }],
pageParam: [1, 2]
}

now, we would have to start with 1.

Grabbing this info from the pageParam works well, but yeah, it's the only reason we have this extra nesting structure :/ It happens right here and is the only place where we need pageParams:

promise=fetchPage([],oldPageParams[0])

Alternatively, we would have to store the information "what's the pageParam of the current first page" somewhere on the query. Would that be better?
I also thought about making defaultPageParam a function that is executed with allPages | undefined, but is there a guarantee that users can always compute that value just from looking at the pages ?

@DamianOsipiuk

Copy link
Copy Markdown
Contributor

@TkDodo But it seems that it's now more like an implementation detail, rather than something users could use.

If it's not usefull for users it would be good to hide this somewhere. And what we really need is something like firstPageParam internally.
Removing pageParams would make using select and cache manipulation easier.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

Base automatically changed from v5 to alphaFebruary 26, 2023 10:01
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

But it seems that it's now more like an implementation detail, rather than something users could use.

yes, I agree.

Removing pageParams would make using select and cache manipulation easier.

cache manipulation, yes. select, kinda. It should be possible to transform to anything via select. it works at runtime, but not on type level. I've added some failing type level tests. I think we should fix them first before changing the structure.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

yes, we would need to store it. it could be part of the query.state, as we store more than just the data anyways:

exportinterfaceQueryState<TData=unknown,TError=RegisteredError>{
data: TData|undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError|null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchFailureReason: TError|null
fetchMeta: any
isInvalidated: boolean
status: QueryStatus
fetchStatus: FetchStatus
}

I will need to look into it. We don't have an infinite version of that query. Maybe storing it on fetchMeta works, idk 😅

@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

hmm, it's mostly an implementation detail, but when working directly with the cache, you'd still need to set it. As an example, assume you have 3 pages:

{
pages: [{}, {}, {}]
pageParams: [5, 10, 15]
}

if we take away pageParams from data and store them somewhere else (on queryState), what happens if you call setQueryData and remove the first page? You will also need to adapt pageParams so that it only contains [10, 15]. We can only do that becausepageParams are part of our Infinite Data structure. So it seems that exactly the use-cases where pageParams becomes annoying are actually the ones that might need it ...

TkDodoand others added 3 commits February 26, 2023 12:00
* feat(select): defer TData inference
* test(select): restore test
* fix(select): change InfiniteQuery Observer definition
* fix(infinite-queries): fix solid type inference select
* fix(infinite-queries): fix solid type inference select
* chore(infinite-queries): fix prettier
* fix(infinite-queries): fix vue and svelte types
* fix(infinite-queries): fix react type inference select
* chore(infinite-queries): fix imports
* style: fix prettier warnings
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@ardeora I'll merge this PR into alpha because it contains some good improvements on the API. If we find a way to get rid of the pageParams as part of data, we can still do this separately.

@TkDodo
TkDodo merged commit 9be63f4 into alphaFeb 27, 2023
@TkDodo
TkDodo deleted the feature/infinite-queries branch February 27, 2023 10:03
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants

@TkDodo@codecov-commenter@DamianOsipiuk@lachlancollins@ecyrbe
, '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

Feature/infinite queries - #5004

Merged
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries
Feb 27, 2023
Merged

Feature/infinite queries#5004
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries

Conversation

@TkDodo

Copy link
Copy Markdown
Collaborator

No description provided.

@vercel

vercelBot commented Feb 19, 2023

Copy link
Copy Markdown

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

1 Ignored Deployment
NameStatusPreviewCommentsUpdated
query⬜️ Ignored (Inspect)Feb 27, 2023 at 9:34AM (UTC)

@codesandbox-ci

codesandbox-ciBot commented Feb 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

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

Latest deployment of this branch, based on commit 3bb0c34:

SandboxSource
@tanstack/query-example-react-basic-typescriptConfiguration
@tanstack/query-example-solid-basic-typescriptConfiguration
@tanstack/query-example-svelte-basicConfiguration
@tanstack/query-example-vue-basicConfiguration

@codecov-commenter

codecov-commenter commented Feb 19, 2023

Copy link
Copy Markdown

Codecov Report

Base: 90.50% // Head: 90.41% // Decreases project coverage by -0.09%⚠️

Coverage data is based on head (3bb0c34) compared to base (ca2f697).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files
@@ Coverage Diff @@## alpha #5004 +/- ##
==========================================
- Coverage 90.50% 90.41% -0.09% 
==========================================
Files 104 104 Lines 3811 3788 -23 Branches 961 948 -13 ==========================================
- Hits 3449 3425 -24 - Misses 329 330 +1 
Partials 33 33 
Impacted FilesCoverage Δ
packages/query-core/src/query.ts99.02% <ø> (ø)
packages/react-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts100.00% <ø> (ø)
packages/svelte-query/src/createInfiniteQuery.ts0.00% <ø> (ø)
packages/vue-query/src/queryClient.ts93.22% <ø> (ø)
packages/vue-query/src/useBaseQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useQuery.ts100.00% <ø> (ø)
packages/query-core/src/infiniteQueryBehavior.ts98.59% <100.00%> (-1.41%)⬇️
packages/query-core/src/infiniteQueryObserver.ts88.46% <100.00%> (-0.43%)⬇️
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

TkDodoand others added 4 commits February 19, 2023 13:29
* feat: add PageParam typing
* feat(infinite-query): more typing
* feat(infinite-query): make pageParam never by defaukt
* feat(infinite-query): PageParam type unknown for infinite queries
* fix(infinite-query): fix tests
* feat(infinite-query): add previous end next return TPageParam type
@TkDodo
TkDodo marked this pull request as ready for review February 19, 2023 15:01
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated

@DamianOsipiukDamianOsipiuk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

Comment threadpackages/query-core/src/types.ts Outdated
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated
because it might be mistaken for a full set of options, which it is not
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@DamianOsipiuk

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

I outlined the problems in the initial RFC. We still need the pageParams to trigger refetches in some cases. As an example, suppose we have the following query:

useInfiniteQuery({
queryKey,
queryFn: ({ pageParam }) => Promise.resolve({ num: pageParam }),
defaultPageParam: 0
getNextPage: (lastPage) => lastPage.num + 1,
getNextPage: (firstPage) => firstPage.num - 1,
})

this will start out with:

{
pages: [{ num: 0 }],
pageParam: [0]
}

now let's fetch some more in the forward direction:

{
pages: [{ num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [0, 1, 2]
}

so far, so good. If a refetch happens now, it always starts at the beginning and then refetches all pages in order. so we:

  • take 0 from the pageParams to initiate the refetches
  • for every subsequent page, we just call getNextPageParam again to re-compute it on the fly.

Now it seems, we could just re-use the defaultPageParam and start with that, but we cannot, for two reasons:

  1. what if we have fetched in the previous direction before, and our state is:
{
pages: [{ num: -1 }, { num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [-1, 0, 1, 2]
}

we now have to start the fetch chain with -1 and not with 0. We only have that info in pageParams.

  1. in the same way, if you use the new pageSize option and set it to 2, you might be in a situation where you no longer have the "initial" page in the cache, we might only have:
{
pages: [{ num: 1 }, { num: 2 }],
pageParam: [1, 2]
}

now, we would have to start with 1.

Grabbing this info from the pageParam works well, but yeah, it's the only reason we have this extra nesting structure :/ It happens right here and is the only place where we need pageParams:

promise=fetchPage([],oldPageParams[0])

Alternatively, we would have to store the information "what's the pageParam of the current first page" somewhere on the query. Would that be better?
I also thought about making defaultPageParam a function that is executed with allPages | undefined, but is there a guarantee that users can always compute that value just from looking at the pages ?

@DamianOsipiuk

Copy link
Copy Markdown
Contributor

@TkDodo But it seems that it's now more like an implementation detail, rather than something users could use.

If it's not usefull for users it would be good to hide this somewhere. And what we really need is something like firstPageParam internally.
Removing pageParams would make using select and cache manipulation easier.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

Base automatically changed from v5 to alphaFebruary 26, 2023 10:01
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

But it seems that it's now more like an implementation detail, rather than something users could use.

yes, I agree.

Removing pageParams would make using select and cache manipulation easier.

cache manipulation, yes. select, kinda. It should be possible to transform to anything via select. it works at runtime, but not on type level. I've added some failing type level tests. I think we should fix them first before changing the structure.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

yes, we would need to store it. it could be part of the query.state, as we store more than just the data anyways:

exportinterfaceQueryState<TData=unknown,TError=RegisteredError>{
data: TData|undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError|null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchFailureReason: TError|null
fetchMeta: any
isInvalidated: boolean
status: QueryStatus
fetchStatus: FetchStatus
}

I will need to look into it. We don't have an infinite version of that query. Maybe storing it on fetchMeta works, idk 😅

@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

hmm, it's mostly an implementation detail, but when working directly with the cache, you'd still need to set it. As an example, assume you have 3 pages:

{
pages: [{}, {}, {}]
pageParams: [5, 10, 15]
}

if we take away pageParams from data and store them somewhere else (on queryState), what happens if you call setQueryData and remove the first page? You will also need to adapt pageParams so that it only contains [10, 15]. We can only do that becausepageParams are part of our Infinite Data structure. So it seems that exactly the use-cases where pageParams becomes annoying are actually the ones that might need it ...

TkDodoand others added 3 commits February 26, 2023 12:00
* feat(select): defer TData inference
* test(select): restore test
* fix(select): change InfiniteQuery Observer definition
* fix(infinite-queries): fix solid type inference select
* fix(infinite-queries): fix solid type inference select
* chore(infinite-queries): fix prettier
* fix(infinite-queries): fix vue and svelte types
* fix(infinite-queries): fix react type inference select
* chore(infinite-queries): fix imports
* style: fix prettier warnings
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@ardeora I'll merge this PR into alpha because it contains some good improvements on the API. If we find a way to get rid of the pageParams as part of data, we can still do this separately.

@TkDodo
TkDodo merged commit 9be63f4 into alphaFeb 27, 2023
@TkDodo
TkDodo deleted the feature/infinite-queries branch February 27, 2023 10:03
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants

@TkDodo@codecov-commenter@DamianOsipiuk@lachlancollins@ecyrbe
, '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

Feature/infinite queries - #5004

Merged
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries
Feb 27, 2023
Merged

Feature/infinite queries#5004
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries

Conversation

@TkDodo

Copy link
Copy Markdown
Collaborator

No description provided.

@vercel

vercelBot commented Feb 19, 2023

Copy link
Copy Markdown

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

1 Ignored Deployment
NameStatusPreviewCommentsUpdated
query⬜️ Ignored (Inspect)Feb 27, 2023 at 9:34AM (UTC)

@codesandbox-ci

codesandbox-ciBot commented Feb 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

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

Latest deployment of this branch, based on commit 3bb0c34:

SandboxSource
@tanstack/query-example-react-basic-typescriptConfiguration
@tanstack/query-example-solid-basic-typescriptConfiguration
@tanstack/query-example-svelte-basicConfiguration
@tanstack/query-example-vue-basicConfiguration

@codecov-commenter

codecov-commenter commented Feb 19, 2023

Copy link
Copy Markdown

Codecov Report

Base: 90.50% // Head: 90.41% // Decreases project coverage by -0.09%⚠️

Coverage data is based on head (3bb0c34) compared to base (ca2f697).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files
@@ Coverage Diff @@## alpha #5004 +/- ##
==========================================
- Coverage 90.50% 90.41% -0.09% 
==========================================
Files 104 104 Lines 3811 3788 -23 Branches 961 948 -13 ==========================================
- Hits 3449 3425 -24 - Misses 329 330 +1 
Partials 33 33 
Impacted FilesCoverage Δ
packages/query-core/src/query.ts99.02% <ø> (ø)
packages/react-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts100.00% <ø> (ø)
packages/svelte-query/src/createInfiniteQuery.ts0.00% <ø> (ø)
packages/vue-query/src/queryClient.ts93.22% <ø> (ø)
packages/vue-query/src/useBaseQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useQuery.ts100.00% <ø> (ø)
packages/query-core/src/infiniteQueryBehavior.ts98.59% <100.00%> (-1.41%)⬇️
packages/query-core/src/infiniteQueryObserver.ts88.46% <100.00%> (-0.43%)⬇️
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

TkDodoand others added 4 commits February 19, 2023 13:29
* feat: add PageParam typing
* feat(infinite-query): more typing
* feat(infinite-query): make pageParam never by defaukt
* feat(infinite-query): PageParam type unknown for infinite queries
* fix(infinite-query): fix tests
* feat(infinite-query): add previous end next return TPageParam type
@TkDodo
TkDodo marked this pull request as ready for review February 19, 2023 15:01
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated

@DamianOsipiukDamianOsipiuk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

Comment threadpackages/query-core/src/types.ts Outdated
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated
because it might be mistaken for a full set of options, which it is not
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@DamianOsipiuk

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

I outlined the problems in the initial RFC. We still need the pageParams to trigger refetches in some cases. As an example, suppose we have the following query:

useInfiniteQuery({
queryKey,
queryFn: ({ pageParam }) => Promise.resolve({ num: pageParam }),
defaultPageParam: 0
getNextPage: (lastPage) => lastPage.num + 1,
getNextPage: (firstPage) => firstPage.num - 1,
})

this will start out with:

{
pages: [{ num: 0 }],
pageParam: [0]
}

now let's fetch some more in the forward direction:

{
pages: [{ num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [0, 1, 2]
}

so far, so good. If a refetch happens now, it always starts at the beginning and then refetches all pages in order. so we:

  • take 0 from the pageParams to initiate the refetches
  • for every subsequent page, we just call getNextPageParam again to re-compute it on the fly.

Now it seems, we could just re-use the defaultPageParam and start with that, but we cannot, for two reasons:

  1. what if we have fetched in the previous direction before, and our state is:
{
pages: [{ num: -1 }, { num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [-1, 0, 1, 2]
}

we now have to start the fetch chain with -1 and not with 0. We only have that info in pageParams.

  1. in the same way, if you use the new pageSize option and set it to 2, you might be in a situation where you no longer have the "initial" page in the cache, we might only have:
{
pages: [{ num: 1 }, { num: 2 }],
pageParam: [1, 2]
}

now, we would have to start with 1.

Grabbing this info from the pageParam works well, but yeah, it's the only reason we have this extra nesting structure :/ It happens right here and is the only place where we need pageParams:

promise=fetchPage([],oldPageParams[0])

Alternatively, we would have to store the information "what's the pageParam of the current first page" somewhere on the query. Would that be better?
I also thought about making defaultPageParam a function that is executed with allPages | undefined, but is there a guarantee that users can always compute that value just from looking at the pages ?

@DamianOsipiuk

Copy link
Copy Markdown
Contributor

@TkDodo But it seems that it's now more like an implementation detail, rather than something users could use.

If it's not usefull for users it would be good to hide this somewhere. And what we really need is something like firstPageParam internally.
Removing pageParams would make using select and cache manipulation easier.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

Base automatically changed from v5 to alphaFebruary 26, 2023 10:01
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

But it seems that it's now more like an implementation detail, rather than something users could use.

yes, I agree.

Removing pageParams would make using select and cache manipulation easier.

cache manipulation, yes. select, kinda. It should be possible to transform to anything via select. it works at runtime, but not on type level. I've added some failing type level tests. I think we should fix them first before changing the structure.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

yes, we would need to store it. it could be part of the query.state, as we store more than just the data anyways:

exportinterfaceQueryState<TData=unknown,TError=RegisteredError>{
data: TData|undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError|null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchFailureReason: TError|null
fetchMeta: any
isInvalidated: boolean
status: QueryStatus
fetchStatus: FetchStatus
}

I will need to look into it. We don't have an infinite version of that query. Maybe storing it on fetchMeta works, idk 😅

@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

hmm, it's mostly an implementation detail, but when working directly with the cache, you'd still need to set it. As an example, assume you have 3 pages:

{
pages: [{}, {}, {}]
pageParams: [5, 10, 15]
}

if we take away pageParams from data and store them somewhere else (on queryState), what happens if you call setQueryData and remove the first page? You will also need to adapt pageParams so that it only contains [10, 15]. We can only do that becausepageParams are part of our Infinite Data structure. So it seems that exactly the use-cases where pageParams becomes annoying are actually the ones that might need it ...

TkDodoand others added 3 commits February 26, 2023 12:00
* feat(select): defer TData inference
* test(select): restore test
* fix(select): change InfiniteQuery Observer definition
* fix(infinite-queries): fix solid type inference select
* fix(infinite-queries): fix solid type inference select
* chore(infinite-queries): fix prettier
* fix(infinite-queries): fix vue and svelte types
* fix(infinite-queries): fix react type inference select
* chore(infinite-queries): fix imports
* style: fix prettier warnings
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@ardeora I'll merge this PR into alpha because it contains some good improvements on the API. If we find a way to get rid of the pageParams as part of data, we can still do this separately.

@TkDodo
TkDodo merged commit 9be63f4 into alphaFeb 27, 2023
@TkDodo
TkDodo deleted the feature/infinite-queries branch February 27, 2023 10:03
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants

@TkDodo@codecov-commenter@DamianOsipiuk@lachlancollins@ecyrbe
, '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

Feature/infinite queries - #5004

Merged
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries
Feb 27, 2023
Merged

Feature/infinite queries#5004
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries

Conversation

@TkDodo

Copy link
Copy Markdown
Collaborator

No description provided.

@vercel

vercelBot commented Feb 19, 2023

Copy link
Copy Markdown

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

1 Ignored Deployment
NameStatusPreviewCommentsUpdated
query⬜️ Ignored (Inspect)Feb 27, 2023 at 9:34AM (UTC)

@codesandbox-ci

codesandbox-ciBot commented Feb 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

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

Latest deployment of this branch, based on commit 3bb0c34:

SandboxSource
@tanstack/query-example-react-basic-typescriptConfiguration
@tanstack/query-example-solid-basic-typescriptConfiguration
@tanstack/query-example-svelte-basicConfiguration
@tanstack/query-example-vue-basicConfiguration

@codecov-commenter

codecov-commenter commented Feb 19, 2023

Copy link
Copy Markdown

Codecov Report

Base: 90.50% // Head: 90.41% // Decreases project coverage by -0.09%⚠️

Coverage data is based on head (3bb0c34) compared to base (ca2f697).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files
@@ Coverage Diff @@## alpha #5004 +/- ##
==========================================
- Coverage 90.50% 90.41% -0.09% 
==========================================
Files 104 104 Lines 3811 3788 -23 Branches 961 948 -13 ==========================================
- Hits 3449 3425 -24 - Misses 329 330 +1 
Partials 33 33 
Impacted FilesCoverage Δ
packages/query-core/src/query.ts99.02% <ø> (ø)
packages/react-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts100.00% <ø> (ø)
packages/svelte-query/src/createInfiniteQuery.ts0.00% <ø> (ø)
packages/vue-query/src/queryClient.ts93.22% <ø> (ø)
packages/vue-query/src/useBaseQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useQuery.ts100.00% <ø> (ø)
packages/query-core/src/infiniteQueryBehavior.ts98.59% <100.00%> (-1.41%)⬇️
packages/query-core/src/infiniteQueryObserver.ts88.46% <100.00%> (-0.43%)⬇️
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

TkDodoand others added 4 commits February 19, 2023 13:29
* feat: add PageParam typing
* feat(infinite-query): more typing
* feat(infinite-query): make pageParam never by defaukt
* feat(infinite-query): PageParam type unknown for infinite queries
* fix(infinite-query): fix tests
* feat(infinite-query): add previous end next return TPageParam type
@TkDodo
TkDodo marked this pull request as ready for review February 19, 2023 15:01
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated

@DamianOsipiukDamianOsipiuk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

Comment threadpackages/query-core/src/types.ts Outdated
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated
because it might be mistaken for a full set of options, which it is not
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@DamianOsipiuk

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

I outlined the problems in the initial RFC. We still need the pageParams to trigger refetches in some cases. As an example, suppose we have the following query:

useInfiniteQuery({
queryKey,
queryFn: ({ pageParam }) => Promise.resolve({ num: pageParam }),
defaultPageParam: 0
getNextPage: (lastPage) => lastPage.num + 1,
getNextPage: (firstPage) => firstPage.num - 1,
})

this will start out with:

{
pages: [{ num: 0 }],
pageParam: [0]
}

now let's fetch some more in the forward direction:

{
pages: [{ num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [0, 1, 2]
}

so far, so good. If a refetch happens now, it always starts at the beginning and then refetches all pages in order. so we:

  • take 0 from the pageParams to initiate the refetches
  • for every subsequent page, we just call getNextPageParam again to re-compute it on the fly.

Now it seems, we could just re-use the defaultPageParam and start with that, but we cannot, for two reasons:

  1. what if we have fetched in the previous direction before, and our state is:
{
pages: [{ num: -1 }, { num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [-1, 0, 1, 2]
}

we now have to start the fetch chain with -1 and not with 0. We only have that info in pageParams.

  1. in the same way, if you use the new pageSize option and set it to 2, you might be in a situation where you no longer have the "initial" page in the cache, we might only have:
{
pages: [{ num: 1 }, { num: 2 }],
pageParam: [1, 2]
}

now, we would have to start with 1.

Grabbing this info from the pageParam works well, but yeah, it's the only reason we have this extra nesting structure :/ It happens right here and is the only place where we need pageParams:

promise=fetchPage([],oldPageParams[0])

Alternatively, we would have to store the information "what's the pageParam of the current first page" somewhere on the query. Would that be better?
I also thought about making defaultPageParam a function that is executed with allPages | undefined, but is there a guarantee that users can always compute that value just from looking at the pages ?

@DamianOsipiuk

Copy link
Copy Markdown
Contributor

@TkDodo But it seems that it's now more like an implementation detail, rather than something users could use.

If it's not usefull for users it would be good to hide this somewhere. And what we really need is something like firstPageParam internally.
Removing pageParams would make using select and cache manipulation easier.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

Base automatically changed from v5 to alphaFebruary 26, 2023 10:01
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

But it seems that it's now more like an implementation detail, rather than something users could use.

yes, I agree.

Removing pageParams would make using select and cache manipulation easier.

cache manipulation, yes. select, kinda. It should be possible to transform to anything via select. it works at runtime, but not on type level. I've added some failing type level tests. I think we should fix them first before changing the structure.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

yes, we would need to store it. it could be part of the query.state, as we store more than just the data anyways:

exportinterfaceQueryState<TData=unknown,TError=RegisteredError>{
data: TData|undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError|null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchFailureReason: TError|null
fetchMeta: any
isInvalidated: boolean
status: QueryStatus
fetchStatus: FetchStatus
}

I will need to look into it. We don't have an infinite version of that query. Maybe storing it on fetchMeta works, idk 😅

@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

hmm, it's mostly an implementation detail, but when working directly with the cache, you'd still need to set it. As an example, assume you have 3 pages:

{
pages: [{}, {}, {}]
pageParams: [5, 10, 15]
}

if we take away pageParams from data and store them somewhere else (on queryState), what happens if you call setQueryData and remove the first page? You will also need to adapt pageParams so that it only contains [10, 15]. We can only do that becausepageParams are part of our Infinite Data structure. So it seems that exactly the use-cases where pageParams becomes annoying are actually the ones that might need it ...

TkDodoand others added 3 commits February 26, 2023 12:00
* feat(select): defer TData inference
* test(select): restore test
* fix(select): change InfiniteQuery Observer definition
* fix(infinite-queries): fix solid type inference select
* fix(infinite-queries): fix solid type inference select
* chore(infinite-queries): fix prettier
* fix(infinite-queries): fix vue and svelte types
* fix(infinite-queries): fix react type inference select
* chore(infinite-queries): fix imports
* style: fix prettier warnings
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@ardeora I'll merge this PR into alpha because it contains some good improvements on the API. If we find a way to get rid of the pageParams as part of data, we can still do this separately.

@TkDodo
TkDodo merged commit 9be63f4 into alphaFeb 27, 2023
@TkDodo
TkDodo deleted the feature/infinite-queries branch February 27, 2023 10:03
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants

@TkDodo@codecov-commenter@DamianOsipiuk@lachlancollins@ecyrbe
, '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

Feature/infinite queries - #5004

Merged
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries
Feb 27, 2023
Merged

Feature/infinite queries#5004
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries

Conversation

@TkDodo

Copy link
Copy Markdown
Collaborator

No description provided.

@vercel

vercelBot commented Feb 19, 2023

Copy link
Copy Markdown

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

1 Ignored Deployment
NameStatusPreviewCommentsUpdated
query⬜️ Ignored (Inspect)Feb 27, 2023 at 9:34AM (UTC)

@codesandbox-ci

codesandbox-ciBot commented Feb 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

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

Latest deployment of this branch, based on commit 3bb0c34:

SandboxSource
@tanstack/query-example-react-basic-typescriptConfiguration
@tanstack/query-example-solid-basic-typescriptConfiguration
@tanstack/query-example-svelte-basicConfiguration
@tanstack/query-example-vue-basicConfiguration

@codecov-commenter

codecov-commenter commented Feb 19, 2023

Copy link
Copy Markdown

Codecov Report

Base: 90.50% // Head: 90.41% // Decreases project coverage by -0.09%⚠️

Coverage data is based on head (3bb0c34) compared to base (ca2f697).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files
@@ Coverage Diff @@## alpha #5004 +/- ##
==========================================
- Coverage 90.50% 90.41% -0.09% 
==========================================
Files 104 104 Lines 3811 3788 -23 Branches 961 948 -13 ==========================================
- Hits 3449 3425 -24 - Misses 329 330 +1 
Partials 33 33 
Impacted FilesCoverage Δ
packages/query-core/src/query.ts99.02% <ø> (ø)
packages/react-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts100.00% <ø> (ø)
packages/svelte-query/src/createInfiniteQuery.ts0.00% <ø> (ø)
packages/vue-query/src/queryClient.ts93.22% <ø> (ø)
packages/vue-query/src/useBaseQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useQuery.ts100.00% <ø> (ø)
packages/query-core/src/infiniteQueryBehavior.ts98.59% <100.00%> (-1.41%)⬇️
packages/query-core/src/infiniteQueryObserver.ts88.46% <100.00%> (-0.43%)⬇️
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

TkDodoand others added 4 commits February 19, 2023 13:29
* feat: add PageParam typing
* feat(infinite-query): more typing
* feat(infinite-query): make pageParam never by defaukt
* feat(infinite-query): PageParam type unknown for infinite queries
* fix(infinite-query): fix tests
* feat(infinite-query): add previous end next return TPageParam type
@TkDodo
TkDodo marked this pull request as ready for review February 19, 2023 15:01
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated

@DamianOsipiukDamianOsipiuk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

Comment threadpackages/query-core/src/types.ts Outdated
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated
because it might be mistaken for a full set of options, which it is not
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@DamianOsipiuk

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

I outlined the problems in the initial RFC. We still need the pageParams to trigger refetches in some cases. As an example, suppose we have the following query:

useInfiniteQuery({
queryKey,
queryFn: ({ pageParam }) => Promise.resolve({ num: pageParam }),
defaultPageParam: 0
getNextPage: (lastPage) => lastPage.num + 1,
getNextPage: (firstPage) => firstPage.num - 1,
})

this will start out with:

{
pages: [{ num: 0 }],
pageParam: [0]
}

now let's fetch some more in the forward direction:

{
pages: [{ num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [0, 1, 2]
}

so far, so good. If a refetch happens now, it always starts at the beginning and then refetches all pages in order. so we:

  • take 0 from the pageParams to initiate the refetches
  • for every subsequent page, we just call getNextPageParam again to re-compute it on the fly.

Now it seems, we could just re-use the defaultPageParam and start with that, but we cannot, for two reasons:

  1. what if we have fetched in the previous direction before, and our state is:
{
pages: [{ num: -1 }, { num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [-1, 0, 1, 2]
}

we now have to start the fetch chain with -1 and not with 0. We only have that info in pageParams.

  1. in the same way, if you use the new pageSize option and set it to 2, you might be in a situation where you no longer have the "initial" page in the cache, we might only have:
{
pages: [{ num: 1 }, { num: 2 }],
pageParam: [1, 2]
}

now, we would have to start with 1.

Grabbing this info from the pageParam works well, but yeah, it's the only reason we have this extra nesting structure :/ It happens right here and is the only place where we need pageParams:

promise=fetchPage([],oldPageParams[0])

Alternatively, we would have to store the information "what's the pageParam of the current first page" somewhere on the query. Would that be better?
I also thought about making defaultPageParam a function that is executed with allPages | undefined, but is there a guarantee that users can always compute that value just from looking at the pages ?

@DamianOsipiuk

Copy link
Copy Markdown
Contributor

@TkDodo But it seems that it's now more like an implementation detail, rather than something users could use.

If it's not usefull for users it would be good to hide this somewhere. And what we really need is something like firstPageParam internally.
Removing pageParams would make using select and cache manipulation easier.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

Base automatically changed from v5 to alphaFebruary 26, 2023 10:01
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

But it seems that it's now more like an implementation detail, rather than something users could use.

yes, I agree.

Removing pageParams would make using select and cache manipulation easier.

cache manipulation, yes. select, kinda. It should be possible to transform to anything via select. it works at runtime, but not on type level. I've added some failing type level tests. I think we should fix them first before changing the structure.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

yes, we would need to store it. it could be part of the query.state, as we store more than just the data anyways:

exportinterfaceQueryState<TData=unknown,TError=RegisteredError>{
data: TData|undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError|null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchFailureReason: TError|null
fetchMeta: any
isInvalidated: boolean
status: QueryStatus
fetchStatus: FetchStatus
}

I will need to look into it. We don't have an infinite version of that query. Maybe storing it on fetchMeta works, idk 😅

@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

hmm, it's mostly an implementation detail, but when working directly with the cache, you'd still need to set it. As an example, assume you have 3 pages:

{
pages: [{}, {}, {}]
pageParams: [5, 10, 15]
}

if we take away pageParams from data and store them somewhere else (on queryState), what happens if you call setQueryData and remove the first page? You will also need to adapt pageParams so that it only contains [10, 15]. We can only do that becausepageParams are part of our Infinite Data structure. So it seems that exactly the use-cases where pageParams becomes annoying are actually the ones that might need it ...

TkDodoand others added 3 commits February 26, 2023 12:00
* feat(select): defer TData inference
* test(select): restore test
* fix(select): change InfiniteQuery Observer definition
* fix(infinite-queries): fix solid type inference select
* fix(infinite-queries): fix solid type inference select
* chore(infinite-queries): fix prettier
* fix(infinite-queries): fix vue and svelte types
* fix(infinite-queries): fix react type inference select
* chore(infinite-queries): fix imports
* style: fix prettier warnings
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@ardeora I'll merge this PR into alpha because it contains some good improvements on the API. If we find a way to get rid of the pageParams as part of data, we can still do this separately.

@TkDodo
TkDodo merged commit 9be63f4 into alphaFeb 27, 2023
@TkDodo
TkDodo deleted the feature/infinite-queries branch February 27, 2023 10:03
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants

@TkDodo@codecov-commenter@DamianOsipiuk@lachlancollins@ecyrbe
, '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

Feature/infinite queries - #5004

Merged
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries
Feb 27, 2023
Merged

Feature/infinite queries#5004
TkDodo merged 27 commits into
alphafrom
feature/infinite-queries

Conversation

@TkDodo

Copy link
Copy Markdown
Collaborator

No description provided.

@vercel

vercelBot commented Feb 19, 2023

Copy link
Copy Markdown

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

1 Ignored Deployment
NameStatusPreviewCommentsUpdated
query⬜️ Ignored (Inspect)Feb 27, 2023 at 9:34AM (UTC)

@codesandbox-ci

codesandbox-ciBot commented Feb 19, 2023

Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

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

Latest deployment of this branch, based on commit 3bb0c34:

SandboxSource
@tanstack/query-example-react-basic-typescriptConfiguration
@tanstack/query-example-solid-basic-typescriptConfiguration
@tanstack/query-example-svelte-basicConfiguration
@tanstack/query-example-vue-basicConfiguration

@codecov-commenter

codecov-commenter commented Feb 19, 2023

Copy link
Copy Markdown

Codecov Report

Base: 90.50% // Head: 90.41% // Decreases project coverage by -0.09%⚠️

Coverage data is based on head (3bb0c34) compared to base (ca2f697).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files
@@ Coverage Diff @@## alpha #5004 +/- ##
==========================================
- Coverage 90.50% 90.41% -0.09% 
==========================================
Files 104 104 Lines 3811 3788 -23 Branches 961 948 -13 ==========================================
- Hits 3449 3425 -24 - Misses 329 330 +1 
Partials 33 33 
Impacted FilesCoverage Δ
packages/query-core/src/query.ts99.02% <ø> (ø)
packages/react-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts100.00% <ø> (ø)
packages/svelte-query/src/createInfiniteQuery.ts0.00% <ø> (ø)
packages/vue-query/src/queryClient.ts93.22% <ø> (ø)
packages/vue-query/src/useBaseQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useInfiniteQuery.ts100.00% <ø> (ø)
packages/vue-query/src/useQuery.ts100.00% <ø> (ø)
packages/query-core/src/infiniteQueryBehavior.ts98.59% <100.00%> (-1.41%)⬇️
packages/query-core/src/infiniteQueryObserver.ts88.46% <100.00%> (-0.43%)⬇️
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

TkDodoand others added 4 commits February 19, 2023 13:29
* feat: add PageParam typing
* feat(infinite-query): more typing
* feat(infinite-query): make pageParam never by defaukt
* feat(infinite-query): PageParam type unknown for infinite queries
* fix(infinite-query): fix tests
* feat(infinite-query): add previous end next return TPageParam type
@TkDodo
TkDodo marked this pull request as ready for review February 19, 2023 15:01
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated

@DamianOsipiukDamianOsipiuk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

Comment threadpackages/query-core/src/types.ts Outdated
Comment threadpackages/vue-query/src/useInfiniteQuery.ts Outdated
because it might be mistaken for a full set of options, which it is not
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@DamianOsipiuk

Hmmm, do we still need pageParams in return of useInfiniteQuery? 🤔

For what it can be usefull?

I outlined the problems in the initial RFC. We still need the pageParams to trigger refetches in some cases. As an example, suppose we have the following query:

useInfiniteQuery({
queryKey,
queryFn: ({ pageParam }) => Promise.resolve({ num: pageParam }),
defaultPageParam: 0
getNextPage: (lastPage) => lastPage.num + 1,
getNextPage: (firstPage) => firstPage.num - 1,
})

this will start out with:

{
pages: [{ num: 0 }],
pageParam: [0]
}

now let's fetch some more in the forward direction:

{
pages: [{ num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [0, 1, 2]
}

so far, so good. If a refetch happens now, it always starts at the beginning and then refetches all pages in order. so we:

  • take 0 from the pageParams to initiate the refetches
  • for every subsequent page, we just call getNextPageParam again to re-compute it on the fly.

Now it seems, we could just re-use the defaultPageParam and start with that, but we cannot, for two reasons:

  1. what if we have fetched in the previous direction before, and our state is:
{
pages: [{ num: -1 }, { num: 0 }, { num: 1 }, { num: 2 }],
pageParam: [-1, 0, 1, 2]
}

we now have to start the fetch chain with -1 and not with 0. We only have that info in pageParams.

  1. in the same way, if you use the new pageSize option and set it to 2, you might be in a situation where you no longer have the "initial" page in the cache, we might only have:
{
pages: [{ num: 1 }, { num: 2 }],
pageParam: [1, 2]
}

now, we would have to start with 1.

Grabbing this info from the pageParam works well, but yeah, it's the only reason we have this extra nesting structure :/ It happens right here and is the only place where we need pageParams:

promise=fetchPage([],oldPageParams[0])

Alternatively, we would have to store the information "what's the pageParam of the current first page" somewhere on the query. Would that be better?
I also thought about making defaultPageParam a function that is executed with allPages | undefined, but is there a guarantee that users can always compute that value just from looking at the pages ?

@DamianOsipiuk

Copy link
Copy Markdown
Contributor

@TkDodo But it seems that it's now more like an implementation detail, rather than something users could use.

If it's not usefull for users it would be good to hide this somewhere. And what we really need is something like firstPageParam internally.
Removing pageParams would make using select and cache manipulation easier.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

Base automatically changed from v5 to alphaFebruary 26, 2023 10:01
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

But it seems that it's now more like an implementation detail, rather than something users could use.

yes, I agree.

Removing pageParams would make using select and cache manipulation easier.

cache manipulation, yes. select, kinda. It should be possible to transform to anything via select. it works at runtime, but not on type level. I've added some failing type level tests. I think we should fix them first before changing the structure.

But question is, how would we store this firstPageParam with persisters? Or do we even need to do that?

yes, we would need to store it. it could be part of the query.state, as we store more than just the data anyways:

exportinterfaceQueryState<TData=unknown,TError=RegisteredError>{
data: TData|undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError|null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchFailureReason: TError|null
fetchMeta: any
isInvalidated: boolean
status: QueryStatus
fetchStatus: FetchStatus
}

I will need to look into it. We don't have an infinite version of that query. Maybe storing it on fetchMeta works, idk 😅

@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

hmm, it's mostly an implementation detail, but when working directly with the cache, you'd still need to set it. As an example, assume you have 3 pages:

{
pages: [{}, {}, {}]
pageParams: [5, 10, 15]
}

if we take away pageParams from data and store them somewhere else (on queryState), what happens if you call setQueryData and remove the first page? You will also need to adapt pageParams so that it only contains [10, 15]. We can only do that becausepageParams are part of our Infinite Data structure. So it seems that exactly the use-cases where pageParams becomes annoying are actually the ones that might need it ...

TkDodoand others added 3 commits February 26, 2023 12:00
* feat(select): defer TData inference
* test(select): restore test
* fix(select): change InfiniteQuery Observer definition
* fix(infinite-queries): fix solid type inference select
* fix(infinite-queries): fix solid type inference select
* chore(infinite-queries): fix prettier
* fix(infinite-queries): fix vue and svelte types
* fix(infinite-queries): fix react type inference select
* chore(infinite-queries): fix imports
* style: fix prettier warnings
@TkDodo

Copy link
Copy Markdown
CollaboratorAuthor

@ardeora I'll merge this PR into alpha because it contains some good improvements on the API. If we find a way to get rid of the pageParams as part of data, we can still do this separately.

@TkDodo
TkDodo merged commit 9be63f4 into alphaFeb 27, 2023
@TkDodo
TkDodo deleted the feature/infinite-queries branch February 27, 2023 10:03
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

5 participants

@TkDodo@codecov-commenter@DamianOsipiuk@lachlancollins@ecyrbe