refactor(query-core): Make MutationMeta and QueryMeta generic

[vojvodics]

This is a rework of #5412 for v5

The basic idea is that we can infer types from meta fields passed in as functions:

Without inference With inference

This, however, requires some setup from the user:

interface MyMeta<
TData = unknown,
TError = unknown,
TVariables = unknown,
TContext = unknown
> {
errorMessage: string | ((error: TError, variables: TVariables, context: TContext) => string);
// I can also infer the type of data correctly
successMessage: string | ((data: TData, variables: TVariables, context: TContext) => string);
}
declare module '@tanstack/react-query' {
interface Register<
TData = unknown,
TError = unknown,
TVariables = unknown,
TContext = unknown
> {
mutationMeta: MyMeta<TData, TError, TVariables, TContext>;
}
}

Also, as mentioned in #5412 - the inference will only work if used in useMutation/useQuery.

Because all generic parameters are optional, this should work exactly the same as before and you don't need to use generics if you don't have to.

[vercel]

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)			May 26, 2023 3:42pm

[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.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 6928516. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx affected --targets=test:eslint,test:types,test:build,test:lib --base=5ae95f47f40c859d15d6581a83bacf02997cfb8e

---

Sent with 💌 from NxCloud.

[TkDodo]

what's problematic about using functions inside meta is that you really can't close over anything in your component, because there is only one meta object per query, and you'd likely read stale values:

function MyComponent(props) {
useQuery({
queryKey,
queryFn,
meta: () => props.foo
})
}

so, I'm unsure if we should make it generic just to support that case 🤔

[vojvodics]

yeah, I see the reason to discourage the usage of functions in meta. That's a problem even without generics.
I'd argue that the example you provided is more of a case in favor of generics - I would have done precisely that instead of reading the values from the query.

[TkDodo]

please reopen to the beta branch, thanks.