feat(docs): add prefetching example from tanstack-query examples

[michaelxvoelker]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/ngneat/query/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: #34

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[michaelxvoelker]

Looks like the default query function have some side effects. 🤔 The example implemented in this PR is only working properly, when I remove the QUERY_CLIENT_CONFIG provider from the providers array in main.ts. Currently, every click on the character name in the list will run another network request.

[NetanelBasal]

@michaelxvoelker sounds weird 🤔. Can you please add a debugger inside the default query function and see if it's stopped there?

[michaelxvoelker]

I found the culprit. The provided QUERY_CLIENT_CONFIG

return <QueryClientConfig>{
          defaultOptions: {
            queries: {
              queryFn,
            },
          },
        };

will overwrite the default configuration of staleTime: Infinity in QueryClient:

export const QueryClient = new InjectionToken<QueryCore>('QueryClient', {
  providedIn: 'root',
  factory() {
    const options = inject(QUERY_CLIENT_OPTIONS);

    return new QueryCore({
      defaultOptions: {
        queries: {
          staleTime: Infinity,
          ...options?.defaultOptions?.queries,
        },
      },
      ...options,
    });
  },
});

Is this intentional? 🤔

Looks like ...options?.defaultOptions?.queries, is unnecessary. If options?.defaultOptions exists, ...options, will overwrite it anyways and ultimately the staleTime: Infinity.

[NetanelBasal]

Yes, it's a bug.

[michaelxvoelker]

I can provide a fix within this PR.

[NetanelBasal]

Go ahead