Function Projects

examples/react/suspense/src/components/Projects.tsx:7–42

({
  setActiveProject,
}: {
  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>
})

import Spinner from './Spinner'

export default function Projects({
  setActiveProject,
}: {
  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>
}) {
  const queryClient = useQueryClient()
  const { data, isFetching } = useSuspenseQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
  })

  return (
    <div>
      <h1>TanStack Repositories {isFetching ? <Spinner /> : null}</h1>
      {data.map((project) => (
        <p key={project.full_name}>
          <Button
            onClick={() => {
              // Prefetch the project query
              queryClient
                .query({
                  queryKey: ['project', project.full_name],
                  queryFn: () => fetchProject(project.full_name),
                })
                .catch(noop)
              setActiveProject(project.full_name)
            }}
          >
            Load
          </Button>{' '}
          {project.name}
        </p>
      ))}
    </div>
  )
}