Tutorial: How to implement infinite loading with URQL GraphQL

#episodes.graphql

query Episodes($page: Int) {
  episodes(page: $page) {
    results {
      air_date
      created
      episode
      name
    }
    #Add this part
    info {
      next
    }
  }
}

12345678910111213141516

#create the hooks folder in the root project directory for all our custom hooks
mkdir hooks && cd hooks 
touch useLoadEpisodes.tsx
123

//useLoadEpisodes.tsx
import { useEffect, useState } from "react";
import { useEpisodesQuery } from "../graphql/episodes.gql";
import { Episode } from "../graphql/types";

export const useLoadEpisodes = () => {
  const [items, setItems] = useState<Partial<Episode | null>[]>([]);

  const [page, setPage] = useState(1);

  const [{ data, fetching }] = useEpisodesQuery({
    variables: {
      page: page,
    },
  });

  const episodes = data?.episodes?.results ?? [];

  //this is the important part, whenever the episodes changes, we concatenate it to the previous list
  useEffect(() => {
    setItems(items.concat(episodes));
  }, [episodes]);

  const next = data?.episodes?.info?.next;

  //when load more is called, we modify the page so that it triggers another query to the backend.
  const loadMore = () => {
    if (next) {
      setPage(next!);
    }
  };

  //return the important items for our interface
  return {
    items,
    hasNext: Boolean(next),
    loadMore,
    fetching,
  };
};
12345678910111213141516171819202122232425262728293031323334353637383940

//pages/index.tsx

import type { NextPage } from "next";
import { useLoadEpisodes } from "../hooks/useLoadEpisodes";

const Home: NextPage = () => {
  //use the custom hook instead of the generated hook
  const { items, hasNext, loadMore, fetching } = useLoadEpisodes();

  const episodes = items;
  return (
    <div className="container">
      {/* this stays the same */}
      <ol className="episode-list">
        {episodes?.map((episode, i) => {
          return (
            <li key={i} className="episode">
              <h2 className="episode-title">{episode?.name}</h2>
              <p className="episode-ep">{episode?.episode}</p>
              <time dateTime={episode?.air_date ?? ""}>
                {episode?.air_date}
              </time>
            </li>
          );
        })}
      </ol>
      {/* add loading indicator for when we are fetching data from the api */}
      {fetching && <p>Loading...</p>}
      {/* add a load more button and call loadMore when clicked */}
      {/* hide it there are no next pages */}
      {!fetching && hasNext && (
        <button className="load-more" onClick={loadMore}>
          Load more
        </button>
      )}
    </div>
  );
};

export default Home;
12345678910111213141516171819202122232425262728293031323334353637383940