SolidJS•6mo ago

Continuos refetches using Solid tanstack, / Reactivity logic?

Can someone expert on SolidJs have a look at my code and see where possibly I have an infinite loop, that triggers tanstack query indefinitly?

DayView.tsx

14 Replies

DUFOP•6mo ago

Weekview.tsx

bigmistqke•6mo ago

i don't see the tanstack query call anywhere in the code u shared

DUFOP•6mo ago

import type { Tmboard } from '#/shared/types'
import { trpc } from '@/utils/trpc'
import { createQuery } from '@tanstack/solid-query'

export const useWeekViewMissions = (date: string) => {
    return createQuery<Tmboard.GroupMissions[][]>(() => ({
        queryKey: ['getWeekMissions', { date }],
        queryFn: () => trpc.mboard.getWeekMissions.query({ date: date }),
    }))
}

export default useWeekViewMissions

import type { Tmboard } from '#/shared/types'
import { trpc } from '@/utils/trpc'
import { createQuery } from '@tanstack/solid-query'

export const useWeekViewMissions = (date: string) => {
    return createQuery<Tmboard.GroupMissions[][]>(() => ({
        queryKey: ['getWeekMissions', { date }],
        queryFn: () => trpc.mboard.getWeekMissions.query({ date: date }),
    }))
}

export default useWeekViewMissions

You are right, i was able to fix it already thou seems like calling functions when passing props is a bad idea, i just passed the CreateQueryResult<Tmboard.GroupMissions[][], Error> as prop and handle the data inside the children Or maybe because I was passing missionGroups.data as props instead of the reactive missionGroups (from createQuery)?

bigmistqke•6mo ago

great that you were able to fix it from what I can see it all seems fine, but the example is also very cluttered so am not sure what to look at

bigmistqke•6mo ago

it's often easier for people to help you if you make a minimal reproduction in the solid playground, you can import external packages too (they will just not be typed) https://playground.solidjs.com/

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

bigmistqke•6mo ago

it's also practical for debugging: 99% of the time I find the cause of the bug while making the reproduction const missionGroups = () => useWeekViewMissions(s.startOfWeekDate) this does look a bit fishy, you are recreating createQuery instead of refetching the query with a new date.

bigmistqke•6mo ago

you can re-write this so that date is a reactive:

// ❌ react version
useQuery(["todos", todo], fetchTodos)

// ✅ solid version
createQuery(() => ["todos", todo()], fetchTodos)

// ❌ react version
useQuery(["todos", todo], fetchTodos)

// ✅ solid version
createQuery(() => ["todos", todo()], fetchTodos)

see https://tanstack.com/query/v4/docs/framework/solid/overview#important-differences-between-solid-query--react-query

Solid Query | TanStack Query Solid Docs

The @tanstack/solid-query package provides a 1st-class API for using TanStack Query with SolidJS. Example

DUFOP•6mo ago

Yeah, I'm realizing that as well. I'm new to solid js way. Thanks for the feedback!

bigmistqke•6mo ago

you are welcome! any specific features of tanstack query you need that createResource does not have?

DUFOP•6mo ago

v5 tanstack mentions: const query = createQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos, })) refech on windows focus

bigmistqke•6mo ago

a m i looking at outdated docs, that's possible

DUFOP•6mo ago

createResource doesn't Cache does it?

bigmistqke•6mo ago

seems like you can pass reactive values in v5 too: https://tanstack.com/query/latest/docs/framework/solid/quick-start#important-differences-between-solid-query--react-query

// ✅ solid version
createQuery(() => ({
  queryKey: ['todos', todo],
  queryFn: fetchTodos,
}))

// ✅ solid version
createQuery(() => ({
  queryKey: ['todos', todo],
  queryFn: fetchTodos,
}))

Quick Start | TanStack Query Solid Docs

The @tanstack/solid-query package provides a 1st-class API for using TanStack Query with SolidJS. Example

bigmistqke•6mo ago

nope it's a pretty dumb primitive it might be handier in the beginning if you are trying out solid 1 less abstraction

Gaming

Programming

Continuos refetches using Solid tanstack, / Reactivity logic?