oxidecomputer / oxidecomputer/console

Change all `prefetchQuery` calls to `ensureQueryData` or `fetchQuery`

Open
#2,616 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

tools
Dominant language
TypeScript
Stars
228
Forks
22
Avg merge
19h 42m
Merged PRs (30d)
32

Description

prefetchQuery eats errors, which has the very annoying consequence that any error we run into in a loader manifests as the ensurePrefetched invariant failure in the component. We never see the real error, only the invariant failure. This means opening the browser console tells you nothing about what went wrong. See #2614 for an example of something made much harder to debug by this. It might also help a little with #2573.

Options
  • fetchQuery (docs, source) fetches data unless it's cached and non-stale.

  • prefetchQuery (docs, source is the same as fetchQuery except it eats errors and returns nothing. 😶

    prefetchQuery<...>(
      options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
    ): Promise<void> {
      return this.fetchQuery(options).then(noop).catch(noop)
    }
    
  • ensureQueryData (docs, source) only calls fetchQuery if there is no data in the cache, regardless of staleness. If revalidateIfStale is true (default false), it will call prefetchQuery to revalidate if there is data in the cache but it's stale. By default, it will not do this, meaning it will simply return cached data if it's present, regardless of staleness.

I'm a little torn between fetchQuery and ensureQueryData. I'm not sure we need the extra logic in ensureQueryData — I think when we run a loader, we do want to make sure the data is fresh because it's a page navigation. I think we want the app to behave as much like a traditional web app as possible. I also don't want to have to pass in revalidateIfStale: true everywhere, so I'd probably add a loaderPrefetch function to the QueryClient object if I wanted to use ensureQueryData.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Search the console for all prefetchQuery calls and read the related loader code, then compare the documented fetchQuery and ensureQueryData behavior in the QueryClient references linked in the issue. Done means loader errors remain visible instead of becoming ensurePrefetched invariant failures, with a consistent choice of replacement behavior across the calls.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.