Skip to content

separate shouldLoadOnMount and shouldFetchOnMount #4368

@milahu

Description

@milahu

Describe the bug

note:
work in progress. im working on a fix, will PR later
so no repro code here

edit:
this may be a race condition
between my persister.restoreClient and QueryObserver.onSubscribe.
all queries should wait for restoreClient

use case:
im fetching immutable data: files from github.
these files are content-addressed via commit hash or blob hash,
so building a cache should be trivial

goal:
fetch every file only once

how:
persistence via indexeddb
query options:

    {
      cacheTime: Infinity,
      staleTime: Infinity,
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      refetchOnReconnect: false,

      // any previous data will be kept when fetching new data because the query key changed.
      //keepPreviousData: true, // ?
    }

but this is not enough to prevent TanStack/query from refetching

executeFetch is still called in QueryObserver.onSubscribe

node_modules/@tanstack/query-core/build/lib/queryObserver.esm.js

class QueryObserver extends Subscribable {
// ...
  onSubscribe() {
    if (this.listeners.length === 1) {
      this.currentQuery.addObserver(this);

      if (shouldFetchOnMount(this.currentQuery, this.options)) {
// FIXME QueryObserver.onSubscribe should not refetch, but use cache
        this.executeFetch();
      }

      this.updateTimers();
    }
  }

when i remove the line this.executeFetch(); it works as expected = dont refetch, use cache

problem: shouldFetchOnMount calls shouldLoadOnMount
but "fetch" and "load" are different actions

function shouldFetchOnMount(query, options) {
  return shouldLoadOnMount(query, options) || query.state.dataUpdatedAt > 0 && shouldFetchOn(query, options, options.refetchOnMount);
}

when i simply remove shouldLoadOnMount(query, options) ||
then my interface is broken, the data is not rendered

related #71 (comment)

Your minimal, reproducible example

http://localhost/

Steps to reproduce

note:
work in progress. im working on a fix, will PR later
so no repro code here

Expected behavior

see above

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

grep /@tanstack pnpm-lock.yaml 

  /@tanstack/query-core/4.13.0:
  /@tanstack/query-persist-client-core/4.13.0:
  /@tanstack/react-query-persist-client/4.13.0:
  /@tanstack/solid-query/[email protected]:

react-query version

4.13.0

TypeScript version

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions