T
TanStack•14mo ago
optimistic-gold

useSuspenseQuery with Next.js app router

I've read through the docs, and I have a grid of project objects that uses the app router prefetching with streaming technique successfully: 
const ProjectGrid: React.FC<ProjectGridProps> = ({ allProjectsPromise }) => {
 

  const { data: projects } = useSuspenseQuery({
    queryKey: ["projects"],
    queryFn: () => allProjectsPromise,
  });

  

  const projectBoxes = Object.values(projects).map((project) => {
    return (
      <Suspense fallback={<LoadingAnimation />}>
        <div key={project.id} id={project.id} className="h-64">
          <ProjectBox projectId={project.id} />
        </div>
      </Suspense>
    );
  });

  return (
     {projects ? projectBoxes : null}
  );
};
const ProjectGrid: React.FC<ProjectGridProps> = ({ allProjectsPromise }) => {
 

  const { data: projects } = useSuspenseQuery({
    queryKey: ["projects"],
    queryFn: () => allProjectsPromise,
  });

  

  const projectBoxes = Object.values(projects).map((project) => {
    return (
      <Suspense fallback={<LoadingAnimation />}>
        <div key={project.id} id={project.id} className="h-64">
          <ProjectBox projectId={project.id} />
        </div>
      </Suspense>
    );
  });

  return (
     {projects ? projectBoxes : null}
  );
};
However, I run into an issue with these ProjectBox objects. I use a separate query for the individual projects so that mutations and invalidation can be isolated instead of affecting all projects. Because the ProjectBox objects never render until all the project data is present, I use initialData from allProjects to fill the project query, so there should be 0 delay between all projects data being present and showing the projectBox. This is not what I observe. The box loads for a few seconds once it appears on the client, it takes the time to run each full individual project query. Does anyone have experience with this situation? I don't need a useSuspenseQuery for the individual box, because it should be guaranteed to have initialData. I've tried to use the enabled flag, it doesn't work. Here's my current query: 
return useQuery({
    ...getSingleProjectOptions(user, projectId),
    initialData: () => {
      const projects = queryClient.getQueryData(
        getAllProjectsOptions(user).queryKey
      );

      if (projects && projects[projectId]) {
        return projects[projectId];
      }
    },
  });
return useQuery({
    ...getSingleProjectOptions(user, projectId),
    initialData: () => {
      const projects = queryClient.getQueryData(
        getAllProjectsOptions(user).queryKey
      );

      if (projects && projects[projectId]) {
        return projects[projectId];
      }
    },
  });
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?