react-query-questions
solid-query-questions
table-questions
virtual-questions
router-questions
react-charts-questions
ranger-questions
vue-query-questions
svelte-query-questions
bling-questions
form-questions
angular-query-questions
start-questions
db-questions
start-showcase
router-showcase
📣-announcements
What is best way to compose queryFn options for server and client in SSR
Just want to know what pattern you guys follow for queryOptions that will work and client and server while preloading.
For example If I am preloading query on server it should call database directly and on client it should fallback to api route...
`replaceEqualDeep` returns 'b' if 'a' is [undefined]
I created a reproduction in this typescript playground: https://shorturl.at/txGY9
(The link is reliable, I shortened it to avoid hitting the character limit)
If I run this code:
```...
b.call is not a function
its throwing unexpected i.call is not a function and sometimes b.call is not a function but it does nt affect the functionality
everything works fine as expected
https://github.com/AJAY0993/Shop.co...
Cannot view docs on some pages
Is anyone experiencing this issue? I am unable to view docs due to a weird
ShikiError:
``
client-CljXtFt3.js:56 ShikiError: Language diff` is not included in this bundle. You may want to load it from external source.
at s (RenderMarkdown-CBHwZCwR.js:25:16657)...Only fetch once.
```ts
const { data, refetch, isFetched } = useQuery({
queryKey: ['todos'],
queryFn: () => (
fetch("http://localhost:3000/api/feed").then((res) => res.json())...
Is this style correct?
Hello 👋
I use this style to "group" and organize my queries:
```typescript...
Error: Rendered more hooks than during the previous render.
function useIndicator() {
const params = useParams<{token: string, chart: string}>()
const {data} = useQuery({
queryKey: ['indicator'],
queryFn: async () => {...
mutateAsync vs mutate with options. What's the difference?
The docs on this page: https://tanstack.com/query/latest/docs/framework/react/guides/mutations#promises say "Use mutateAsync instead of mutate to get a promise which will resolve on success or throw on an error. This can for example be used to compose side effects." with the following code as an example:
```ts
const mutation = useMutation({ mutationFn: addTodo })
try {
const todo = await mutation.mutateAsync(todo)...
isFetched vs isSuccess
Can anyone explain what the difference is between
isFetched and isSuccess?
I have seen some other developers using these two flags to determine if data is "ready" in our application, and after reading the docs, I am not clear what the impact would be of using one vs the other....useQuery vs useMutation
Hello!! I would like your opinion and how you handle the following scenario.
when you want to perform an API call on a button click do you use useQuery refetch option or you go for useMutation?
...
V5 Infinite loop issue
Alright so the old code is like
...
const [data1, setData1] = useState()
const [data2, setData2] = useState()
const [data1, setData1] = useState()
const [data2, setData2] = useState()
Error feedback with `createMutation` in `Solid`
I have the following situation:
```ts
export function postProgram() {
return createMutation(() => ({
mutationFn: async (program: Partial<Program>) => {...
`exhaustive-deps` not complaining about `window.location.origin` anymore
Hey,
in our codebase we are using window.location.origin inside our queryFn. Previously the exhaustive-deps check was complaining if we did not include it in the key. But if we did I think some kind of error occurred (can not really recall right now). So we ended up with something like
```ts...
Track upload progress for optimistic updates
The docs show how to use variables for optimistic updates
https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#if-the-mutation-and-the-query-dont-live-in-the-same-component
```tsx
// somewhere in your app
const { mutate } = useMutation({...
Have any way to fetch data using tanstack query into a .ts file?
So, i have a createChartFactory.ts that have a lot of functions and one called init, so inside init i want fetch data and return.
` const fetchPricesFx = async () => {
const res = await fetch(my-api`)...Resources on API data typing, read vs update vs create ?
TLDR: Seeking best practices for handling API data validation and form validation in a React app with Typescript.
Full question:
We're using React, Typescript, TanStack Query, zod, react-hook-form, etc. The back-end is python, fully separate, cannot use the same typings files.
...
error Type
So I am converting v4 to v5 and originally I have a code like this
```
onError: (error: any) => {
if (error.response?.status !== 401) {
console.error('<Layout> getting generic input data', error);...
V5 `enabled: false` query will automatically refetch on invalidateQueries
I accidentally created queries that had the same key; one was enabled and the other was disabled. This is probably what caused the problem. I've already fixed it by changing the key of one query, but perhaps someone could verify if this is the intended behavior.
Here's a small code snippet on how to reproduce it. As you can see, the query is disabled, but on the screen, you will see the 'this should never be shown' text if you click the button.
"@tanstack/react-query": "5.29.2",
```
function useEnabledTestQuery() {...HELP! V4 to V5 migration Codemod didn't work
So this is what I did
```
1. installed "@tanstack/react-query": "^5.29.2",
"@tanstack/react-query-devtools": "^5.29.2",
2. changed the node_modules/@tanstack/react-query/build/codemods/src/v5/remove-overloads/remove-overloads.js to CJS ...