SolidJSS
SolidJS•9mo ago•
8 replies
fengzi91

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>
  )
}


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!
Was this page helpful?