Fetching coupons from Shopify

I am trying to create a shopify checkout extension that pulls available discount codes but am getting a "Cannot read properties of undefined (reading 'codeDiscountNodes')" error. I am trying to use the Shopify GraphQL to pull available coupons and save in the 'disc' variable. The framework is Remix.

Here is the relevant code, please let me know what I'm doing wrong.

function Extension() {
  const {query} = useApi();
  const [disc, setDisc] = useState([]);

  useEffect(() => {
    fetchDiscounts()
    console.log("Discount codes: ", disc)
  });


async function fetchDiscounts() {
  try {
    const { data } = await query(
      `query {
        codeDiscountNodes(first: 3) {
          nodes {
            id
            codeDiscount {
              ... on DiscountCodeBasic {
                title
                summary
              }
              ... on DiscountCodeBxgy {
                title
                codeCount
              }
            }
          }
        }
      }`
    );
    const codeDiscountNodes = data?.codeDiscountNodes?.nodes || [];
    setDisc(codeDiscountNodes);
  } catch (error) {
    console.error(error);
  } 
}
}

Here is a solution you need to try

Enable network access in the checkout UI extension and create a backend app. The checkout UI extension can then make API calls to the backend app, which is responsible for securely querying discount codes from the Shopify API.

Detailed guidance on enabling network access can be found here

Checkout UI Extension Network Access