Elastic Search useSWR Pagination when page index is defined in the body, not working

[theProgrammerSleigh]

Need some help folks, trying to paginate Elastic Search requests with useSWRInfinite.

Elastic wants pages defined in the body of a POST request, and I figured I would try something out to see if it works with useSWR but my data is constantly coming back as null/undefined. Help me swr discussions tab, you're my only hope.

Here's some code snippets

const getKey = (pageIndex: any, previousPageData: any) => {
    if (previousPageData && !previousPageData.results.length) return null;
    return pageIndex; // THIS is what I tried to change up. Idk if it will work. Just send the index to the fetcher.
  };

  // Pass index from getKey to the body of the request.
  const fetcher = (page: any) => 
    fetch(
      `${process.env.NEXT_PUBLIC_ELASTIC_BASE_URL}/api/as/v1/engines/{redacted}/search.json`,
      {
        method: 'POST',
        body: JSON.stringify({
          query: query,
          page: { size: 10, current: page },
        }),
        headers: {
          Authorization: 'Bearer ' + process.env.NEXT_PUBLIC_ELASTIC_SEARCH_KEY,
          'Content-Type': 'application/json',
        },
      }
    ).then((r) => r.json());


  const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite(
    getKey,
    fetcher
  );

My React, the stringified results are just for me to quickly reference the json structure and are temporary.

  if (error) return <div>{error}</div>; // Currently not showing any errors
  if (!data) return <div>{JSON.stringify(results)}</div>; //Threw this in to test and it displays this, data is falsy.

  return (
    <div className="flex flex-col pt-16 space-y-12 w-full xl:w-2/3 mx-auto text-white mb-64">
      {JSON.stringify(results)}

      <span className="text-4xl text-center">{totalResults} Results</span>

      <SearchBar placeholder="Search" />

      {data.map((page: any) => {
        return (
          <>
            {page.map((advisor: any, i: number) => {
              return (
                <div
                  key={i}
                  className="bg-primary w-full h-64 rounded-xl my-6 p-4 flex items-center justify-center"
                >
                  <span>{advisor.name.raw}</span>
                </div>
              );
            })}
          </>
        );
      })}

      <Button
        onClick={() => {
          setSize(size + 1);
        }}
        text="Load More"
      />
    </div>

Any ideas what I could do to get this to work?