來自 Apollo Query 的數據未定義

Question

我想問一下為什么從 Apollo Query 返回的數據是未定義的。

下面是我在 Next.js 中的代碼片段，其中 Next.js 組件 Image 的 src 值設置為launch.ships[0].image 。 但它給我一個錯誤： TypeError: Cannot read properties of undefined (reading 'image')老實說我不知道為什么？

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

export default function Home({ launches }) {
  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}>SpaceX Launches</h1>

        <p className={styles.description}>Latest launches from SpaceX</p>

        <div className={styles.grid}>
          {launches.map((launch) => {
            console.log(launch);
            return (
              <a
                key={launch.id}
                href={launch.links.video_link}
                className={styles.card}
              >
                <Image src={launch.ships[0].image} alt="Ship image" />s
                <h3>{launch.id}</h3>
                <p>
                  <strong>Launch Date:</strong>
                  {new Date(launch.launch_date_local).toLocaleDateString(
                    "en-US"
                  )}
                </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() {
  const client = new ApolloClient({
    uri: "https://api.spacex.land/graphql/",
    cache: new InMemoryCache(),
  });

  const { data } = await client.query({
    query: gql`
      query GetLaunches {
        launchesPast(limit: 10) {
          id
          mission_name
          launch_date_local
          launch_site {
            site_name_long
          }
          links {
            article_link
            video_link
            mission_patch
          }
          rocket {
            rocket_name
          }
          ships {
            image
          }
        }
      }
    `,
  });

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

這是來自 GraphQL 的編譯查詢：

{
  "data": {
    "launchesPast": [
      {
        "id": "109",
        "mission_name": "Starlink-15 (v1.0)",
        "launch_date_local": "2020-10-24T11:31:00-04:00",
        "launch_site": {
          "site_name_long": "Cape Canaveral Air Force Station Space Launch Complex 40"
        },
        "links": {
          "article_link": null,
          "video_link": "https://youtu.be/J442-ti-Dhg",
          "mission_patch": "https://images2.imgbox.com/d2/3b/bQaWiil0_o.png"
        },
        "rocket": {
          "rocket_name": "Falcon 9"
        },
        "ships": [
          {
            "image": "https://i.imgur.com/MtEgYbY.jpg"
          },
          {
            "image": "https://imgur.com/NHsx95l.jpg"
          },
          {
            "image": "https://i.imgur.com/7VMC0Gn.jpg"
          },
          {
            "image": "https://i.imgur.com/ABXtHKa.jpg"
          }
        ]
      },
      {
        "id": "108",
        "mission_name": "Sentinel-6 Michael Freilich",
        "launch_date_local": "2020-11-21T09:17:00-08:00",
        "launch_site": {
          "site_name_long": "Vandenberg Air Force Base Space Launch Complex 4E"
        },
        "links": {
          "article_link": "https://spaceflightnow.com/2020/11/21/international-satellite-launches-to-extend-measurements-of-sea-level-rise/",
          "video_link": "https://youtu.be/aVFPzTDCihQ",
          "mission_patch": null
        },
        "rocket": {
          "rocket_name": "Falcon 9"
        }

謝謝您的幫助。

Answer 1

我需要查看更多代碼才能確定，但可能有些launches沒有ships 。 你可以這樣做：

   <div className={styles.grid}>
      {launches.map((launch) => {
        console.log(launch);
        return (
          <a
            key={launch.id}
            href={launch.links.video_link}
            className={styles.card}
          >
            {(launch.ships && launch.ships.length > 0) &&
               <Image src={launch.ships[0].image} alt="Ship image" />
            }
            <h3>{launch.id}</h3>
            <p>
              <strong>Launch Date:</strong>
              {new Date(launch.launch_date_local).toLocaleDateString(
                "en-US"
              )}
            </p>
          </a>
        );
      })}
    </div>

來自 Apollo Query 的數據未定義

問題描述

1 個解決方案

解決方案1
0 2022-02-04 19:10:15

來自 Apollo Query 的數據未定義

問題描述

1 個解決方案

解決方案1 0 2022-02-04 19:10:15

解決方案1
0 2022-02-04 19:10:15