feat(svelte-query): use store for reactivity in options

[chrislcs]

To fix #4851

This adds the option to use a writable store for the query options, so that svelte query can react appropriately when these options change. The current method of reactivity recreates the entire query each time an option is changed, which causes issues.

[vercel]

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated
query	⬜️ Ignored (Inspect)			Feb 26, 2023 at 8:15AM (UTC)

[codesandbox-ci]

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 3720409:

Sandbox	Source
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration
hungry-torvalds-z4tkxu	Issue #4851

[chrislcs]

@lachlancollins With a bit of a delay, here is the PR for using writable stores for the query options

[ap0nia]

What if the query options are always converted to a store, and then the query provides a method to update those options and react accordingly, e.g. by calling the new queryFn?

example using the revised documentation

/** regular object with the query options */
 const queryOptions = {
    queryKey: ['refetch'],
    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
    refetchInterval: 1000,
  }

  const query = createQuery(queryOptions)

  function updateRefetchInterval(event) {
    /** internally invokes the "update" method for Svelte stores and then reacts appropriately */
    $query.updateOptions({
        refetchInterval: event.target.valueAsNumber
    })
  }

Extra context:
I wrote a private Svelte wrapper around @tanstack/react-query and I don't have access to the original query options once I've created all of the hooks, but I'd like to trigger the reactivity for the query by updating its query params

[codecov-commenter]

Codecov Report

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

Coverage data is based on head (3720409) compared to base (dc1443e).
Patch coverage: 89.28% 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             @@
##               v5    #4995      +/-   ##
==========================================
- Coverage   90.50%   90.50%   -0.01%     
==========================================
  Files         104      105       +1     
  Lines        3814     3811       -3     
  Branches      964      963       -1     
==========================================
- Hits         3452     3449       -3     
  Misses        329      329              
  Partials       33       33              

Impacted Files	Coverage Δ
packages/svelte-query/src/createInfiniteQuery.ts	0.00% <ø> (ø)
packages/svelte-query/src/createQuery.ts	100.00% <ø> (ø)
packages/svelte-query/src/createBaseQuery.ts	83.33% <81.25%> (+1.51%)	⬆️
packages/svelte-query/src/createMutation.ts	92.30% <100.00%> (ø)
packages/svelte-query/src/createQueries.ts	100.00% <100.00%> (ø)
packages/svelte-query/src/utils.ts	100.00% <100.00%> (ø)
packages/vue-query/src/vueQueryPlugin.ts	100.00% <0.00%> (ø)
.../src/rules/exhaustive-deps/exhaustive-deps.rule.ts	100.00% <0.00%> (ø)

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.

[lachlancollins]

@chrislcs I couldn't have picked a worse time to review this - everything looks good, the PR was closed because the target branch changed. Could you please change this to target alpha?

[TkDodo]

sorry about that 🙈

[chrislcs]

@lachlancollins Couldn't edit the target branch of this PR, so I created a new one: #5050

[chrislcs]

What if the query options are always converted to a store, and then the query provides a method to update those options and react accordingly, e.g. by calling the new queryFn?

example using the revised documentation

/** regular object with the query options */
 const queryOptions = {
    queryKey: ['refetch'],
    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
    refetchInterval: 1000,
  }

  const query = createQuery(queryOptions)

  function updateRefetchInterval(event) {
    /** internally invokes the "update" method for Svelte stores and then reacts appropriately */
    $query.updateOptions({
        refetchInterval: event.target.valueAsNumber
    })
  }

Extra context: I wrote a private Svelte wrapper around @tanstack/react-query and I don't have access to the original query options once I've created all of the hooks, but I'd like to trigger the reactivity for the query by updating its query params

@bevm0 This could be another addition, separate from this PR. Internally the options already get converted into a store, so to add this functionality you'd need to add an updateOptions function to the return query object. Something like this (as part of the createBaseQuery function):

  const { subscribe } = derived(result, ($result) => {
    $result = observer.getOptimisticResult(get(defaultedOptionsStore))
    return !get(defaultedOptionsStore).notifyOnChangeProps
      ? observer.trackResult($result)
      : $result
  })

  function updateOptions(
    updatedOptions: Partial<
      CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
    >,
  ) {
    optionsStore.update((currentOptions) => ({
      ...currentOptions,
      ...updatedOptions,
    }))
  }

  return { subscribe, updateOptions }

Up to the svelte-query maintainers if this is desired functionality.