T
TanStack•4y ago
adverse-sapphire

one Query with many dependencies vs many Queries

Hey guys, just started using react query and i am not sure regarding this using nextjs 12 (SSG) with hydration: - blogOverview that can filter by tag via api and via search params. Initially I want to load the data during build (no tags, no search): 
export async function getStaticProps() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(['posts'], getPosts)

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}
export async function getStaticProps() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(['posts'], getPosts)

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}
What is the best way to handle the other cases in the blog page? 3 Multiple queries like this? and how would i decide which data is the source of truth in the component? this seems cumbersome 🤔 
useQuery({
  queryKey: ['posts', tagIds],
  queryFn: () => getPosts({tagIds}),
  enabled: () => tagIds.length > 0,
});

useQuery({
  queryKey: ['posts', tagIds, search],
  queryFn: () => getPosts({tagIds, search}),
  enabled: () => tagIds.length > 0 && search.length > 0,
});

useQuery({
  queryKey: ['posts', search],
  queryFn: () => getPosts({ search }),
  enabled: () => search.length > 0,
});
useQuery({
  queryKey: ['posts', tagIds],
  queryFn: () => getPosts({tagIds}),
  enabled: () => tagIds.length > 0,
});

useQuery({
  queryKey: ['posts', tagIds, search],
  queryFn: () => getPosts({tagIds, search}),
  enabled: () => tagIds.length > 0 && search.length > 0,
});

useQuery({
  queryKey: ['posts', search],
  queryFn: () => getPosts({ search }),
  enabled: () => search.length > 0,
});
would it make sense to structure this like one query that also gets used during SSG like this and pass null to tagsIds and search during SSG? 
useQuery({
  queryKey: ['posts', tagIds, search],
  queryFn: () => getPosts({tagIds, search}),
});
useQuery({
  queryKey: ['posts', tagIds, search],
  queryFn: () => getPosts({tagIds, search}),
});
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?