Add support for incremental static regeneration

https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

pages/index.tsx

@@ -1,8 +1,25 @@
 import ItemList from 'components/ItemList';
 import { useItems } from 'services/api-hooks';
+import { Item } from 'services/data-types';
 
-export default function Home() {
-  const { data, isSuccess } = useItems();
+interface HomeProps {
+  items: Item[] | undefined;
+}
+
+export default function Home({ items }: HomeProps) {
+  const { data, isSuccess } = useItems({ initialData: items });
 
   return <div>{isSuccess && data && <ItemList items={data} />}</div>;
 }
+
+export async function getStaticProps() {
+  const res = await fetch(`${process.env.SITE}/api/items`);
+  const items = await res.json();
+
+  return {
+    props: {
+      items,
+    },
+    revalidate: 30,
+  };
+}

services/api-hooks.ts

@@ -1,13 +1,13 @@
-import { useQuery, useMutation, queryCache } from 'react-query';
+import { useQuery, useMutation, queryCache, QueryOptions } from 'react-query';
 import { Item } from 'services/data-types';
 
 const defaultQueryFn = (requestPath: string) =>
   fetch(requestPath).then((res) => res.json());
 
 // queries
 
-export function useItems() {
-  return useQuery<Item[], string, string>('/api/items', defaultQueryFn);
+export function useItems<Result = Item[]>(options?: QueryOptions<Result>) {
+  return useQuery<Result, string>('/api/items', defaultQueryFn, options);
 }
 
 export function useMeData() {