文章/答案/技术大牛

发布

社区首页 >问答首页 >来自阿波罗查询的数据未定义。

问来自阿波罗查询的数据未定义。
EN

Stack Overflow用户

提问于 2022-02-04 17:08:24

回答 1查看 460关注 0票数 0

我想问为什么阿波罗查询返回的数据没有定义。

下面是我在launch.ships.image.中的代码片段，其中src值设置为Next.js的Next.js组件映像但它给我带来了一个错误：TypeError:无法读取未定义(读取‘图像’)的属性，老实说，我不知道为什么？

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"
        }

谢谢你的帮助。

javascript

reactjs

graphql

next.js

apollo

回答 1

Stack Overflow用户

发布于 2022-02-04 19:10:15

我需要看到更多的代码才能确定，但可能有些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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70990235

复制

相似问题

问来自阿波罗查询的数据未定义。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来自阿波罗查询的数据未定义。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问来自阿波罗查询的数据未定义。
EN