fengzi91
fengzi91
PostsComments
SSolidJS
Created by fengzi91 on 5/1/2025 in #support
How to invalidate cached data or show loading state during data filtering in SolidStart?
I'm working with a query in SolidStart and want to show a loading state when filtering data. Here's my current implementation: 
const getTodos = query(async (type?: string) => {
  // ...get data 
  return data;
}, 'todos')

export default function Home() {
  const [searchParams, setSearchParams] = useSearchParams()
  const todos = createAsync(() => getTodos())
  
  return (
    <div>
      <div>
        filter: 
        <button onClick={() => {
          setSearchParams({...searchParams, type: undefined})
        }}>all</button>
        <button onClick={() => {
          setSearchParams({...searchParams, type: 'completed'})
        }}>completed</button>
      </div>
      <Suspense fallback={<div>loading...</div>}>
        <For each={todos.latest}>
          {item => <div>{item.title} - {item.completed ? 'completed' : 'pending'}</div>}
        </For>
      </Suspense>
    </div>
  )
}
const getTodos = query(async (type?: string) => {
  // ...get data 
  return data;
}, 'todos')

export default function Home() {
  const [searchParams, setSearchParams] = useSearchParams()
  const todos = createAsync(() => getTodos())
  
  return (
    <div>
      <div>
        filter: 
        <button onClick={() => {
          setSearchParams({...searchParams, type: undefined})
        }}>all</button>
        <button onClick={() => {
          setSearchParams({...searchParams, type: 'completed'})
        }}>completed</button>
      </div>
      <Suspense fallback={<div>loading...</div>}>
        <For each={todos.latest}>
          {item => <div>{item.title} - {item.completed ? 'completed' : 'pending'}</div>}
        </For>
      </Suspense>
    </div>
  )
}
Currently, the loading state only shows on the initial page load. When I click the "completed" filter button, it doesn't show the loading state - it just replaces the list when the new data arrives. I want to show the loading state when switching filters, essentially invalidating todos.latest when the filter changes. Any suggestions on how to achieve this? Thanks in advance!
9 replies