DivMode•13mo ago

prefetchinfinite not working when inputs are different

Ive been trying to figure out why prefetching doesnt work when the inputs are different between prefetchinfinite and infinitequery. Its works great when the inputs are the same. Hoping someone can shed some light on this.

export const getStaticProps: GetStaticProps<
  PageProps,
  Query,
  PreviewData
> = async (ctx) => {
  const { preview = false, previewData = {} } = ctx;

  const token = previewData.token;
  const [settings, page = fallbackPage] = await Promise.all([
    getSettings({ token }),
    getHomePage({ token })
  ]);

  const ssg = createServerSideHelpers({
    router: appRouter,
    ctx: await createContextInner(),
    transformer: superjson
  });

  await ssg.domain.getAll.prefetchInfinite({
    recordsPerPage: 40,
    query: null,
    sorting: [
      {
        id: "godaddyDomainData.auctionEndTime",
        desc: true
      }
    ],
    activeAuctions: true,
    attributes: attributes,
    filters: {
      query: {
        items: [{ type: "cond", data: {} }]
      }
    }
  });

  return {
    props: {
      trpcState: ssg.dehydrate(),
      page,
      settings,
      preview,
      token: previewData.token ?? null
    },
    revalidate: 3600
  };
};

export const getStaticProps: GetStaticProps<
  PageProps,
  Query,
  PreviewData
> = async (ctx) => {
  const { preview = false, previewData = {} } = ctx;

  const token = previewData.token;
  const [settings, page = fallbackPage] = await Promise.all([
    getSettings({ token }),
    getHomePage({ token })
  ]);

  const ssg = createServerSideHelpers({
    router: appRouter,
    ctx: await createContextInner(),
    transformer: superjson
  });

  await ssg.domain.getAll.prefetchInfinite({
    recordsPerPage: 40,
    query: null,
    sorting: [
      {
        id: "godaddyDomainData.auctionEndTime",
        desc: true
      }
    ],
    activeAuctions: true,
    attributes: attributes,
    filters: {
      query: {
        items: [{ type: "cond", data: {} }]
      }
    }
  });

  return {
    props: {
      trpcState: ssg.dehydrate(),
      page,
      settings,
      preview,
      token: previewData.token ?? null
    },
    revalidate: 3600
  };
};

const {
    data,
    hasNextPage,
    fetchNextPage,
    isError,
    isFetching,
    isLoading
  } = trpc.domain.getAll.useInfiniteQuery(
    {
      recordsPerPage: 40,
      query: debounced,
      sorting,
      activeAuctions,
      attributes: undefined,
      filters
    },
    {
      getNextPageParam: (lastPage) => {
        // @ts-ignore
        const totalPages = Math.floor(
          lastPage.estimatedTotalHits / lastPage.limit
        );
        // @ts-ignore
        const actualPage = lastPage.offset / lastPage.limit;
        return actualPage < totalPages ? actualPage + 1 : undefined; // By returning undefined if there are no more pages, hasNextPage boolean will be set to false
      }
    }
  );

const {
    data,
    hasNextPage,
    fetchNextPage,
    isError,
    isFetching,
    isLoading
  } = trpc.domain.getAll.useInfiniteQuery(
    {
      recordsPerPage: 40,
      query: debounced,
      sorting,
      activeAuctions,
      attributes: undefined,
      filters
    },
    {
      getNextPageParam: (lastPage) => {
        // @ts-ignore
        const totalPages = Math.floor(
          lastPage.estimatedTotalHits / lastPage.limit
        );
        // @ts-ignore
        const actualPage = lastPage.offset / lastPage.limit;
        return actualPage < totalPages ? actualPage + 1 : undefined; // By returning undefined if there are no more pages, hasNextPage boolean will be set to false
      }
    }
  );

1 Reply

DivMode•13mo ago

The main difference is the attributes input, I want to get minimal amount of attributes on initial load then load everything after.