'Cannot destructure property 'data' of '(intermediate value)' as it is undefined error in Next JS & Graph QL

I'm trying to achieve a Apollo request to SpaceX api. But getting a 500 (Internal Server Error) and also at getStaticProps. I don't know if it's a syntax issue or some error in my method of usage.

Note: API is used in postman and it works fine there.

Please help me. Thank you !

  import { ApolloClient, InMemoryCache, gql, ApolloError } from "@apollo/client";
  import Head from "next/head";
   import Image from "next/image";
  import styles from "../styles/Home.module.css";

   export default function Home({ launches }) {
  console.log(launches, "data");

UI layer as usual from Next JS

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{" "}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/canary/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

export async function getStaticProps() {
  console.log("ran func data from spacex");

  const client = new ApolloClient({
    uri: "https://api.spacex.land/graphql/",
    cache: new InMemoryCache(),
  });

  const { data } = await client
    .query({
      query: gql`{
          launchesPast(limit: 1) {
            mission_name
            launch_date_local
            launch_site {
              site_name_long
            }
            links {
              article_link
              video_link
            }
            rocket {
              rocket_name
              first_stage {
                cores {
                  flight
                  core {
                    reuse_count
                    status
                  }
                }
              }
              second_stage {
                payloads {
                  payload_type
                  payload_mass_kg
                  payload_mass_lbs
                }
              }
            }
            ships {
              name
              home_port
              image
            }
          }
        }
      `,
    })
    .then((res) => console.log(res))
    .catch((err) => console.log(err, "error on your side"));

  console.log("ran func data from spacex");

  return {
    props: {
      launches: data
    },
  };
}

Solution 1:^[1]

You have two things going on here. First, you're not returning the response in your then statement so data is undefined. So you need to change this to:

const { data } = await client
  .query({
    query: gql`
      { ... }
    `,
  }).then((res) => {
    console.log(res)
    return res
  }).catch((err) => {
    console.log(err, "error on your side")
    return err
  })

Without this, your then statement is capturing the response and returning the console log statement to const {data} which is a problem because data is not defined on console.log.

Once you fix that, you may run into another error, this time from SpaceX - query exceeds complexity limit. This isn't so much a problem with your code but with the number of data points and depth of information you're trying to pull from the api. I can't tell you how to fix that one because it depends on your business rules, but once you solve it, you should see data flowing.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	I'm Joe Too

'Cannot destructure property 'data' of '(intermediate value)' as it is undefined error in Next JS & Graph QL

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]