graphql - NextJS unable to map array of products from graphql query after page reload

Question

Im using URQL as my graphql client. I am trying to pass a variable called handle and map through an array of products from my shopify storefront. It works the first time but after I reload the page, I get cannot read property of "products" undefined error.

//[handle].js

import { useRouter } from "next/router";
import { useQuery } from "urql";

const Product = (props) => {
  const router = useRouter();
  const { handle } = router.query;

  const [result] = useQuery({
    query: productByHandle,
    variables: { handle: handle },
  });

  const { data, fetching, error } = result;
  const products = data.products.edges;

  if (error) {
    console.log(error);
  }

  const testButton = () => {
    props.setCart(true);
  };

  return (
    <div className={styles.product}>
      {console.log(
        products.map((product) => {
          return product.node.title;
        })
   </div>
  );
};

export default Product;