moderate-tomato

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

TanStack•4y ago

moderate-tomato

one Query with many dependencies vs many Queries

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

one Query with many dependencies vs many Queries

Similar Threads

one Query with many dependencies vs many Queries

Similar Threads

Similar Threads

Similar Threads