在 Next.js 應用程序中使用 graphQL 的動態路由

Question

我正在使用 apollo 作為客戶端構建一個使用 spaceX graphQL api 的網頁。 在登陸頁面上，我想顯示一個“發布”卡片，點擊該卡片后，將指向一個新頁面，其中包含有關該特定發布的詳細信息，如下所示：

index.js

import { ApolloClient, InMemoryCache, gql } from "@apollo/client"
import Link from 'next/link'

export const getStaticProps = async () => {

  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
          }
        }
      }
    `
  });

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

export default function Home({ launches }) {

  return (
    <div>
      {launches.map(launch => {
        return(
          <Link href = {`/items/${launch.id}`} key = {launch.id}>
            <a>
              <p>{launch.mission_name}</p>
            </a>
          </Link>
        )
      })}
    </div>
  )
}

我設置了一個新頁面items/[id].js來顯示有關各個啟動的信息，但這就是混亂的地方。 Using a standard REST api I'd simply use fetch , then append the id to the end of the url to retrieve the desired data. 但是，我不確定如何使用getStaticPaths function 在 graphQL 中進行等效操作。 有什么建議么？

這是items/[id]/js ，我試圖在其中呈現單個啟動數據：

import { ApolloClient, InMemoryCache, gql } from "@apollo/client"

export const getStaticPaths = async () => {

  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
        }
      }
    `,
  });

  const paths = data.map((launch) => {
    return {
      params: { id: launch.id.toString() },
    };
  });

  return {
      paths,
      fallback:false
  }

};

export const getStaticProps = async (context) => {
    const id = context.params.id
// not sure what to do here
}

const Items = () => {
    return ( 
        <div>
            this is items
        </div>
     );
}
 
export default Items;

Answer 1

對於 getStaticPaths

export const getStaticPaths = async () => {
  const { data } = await client.query({
    query: launchesPastQuery, // this will query the id only
  });
  return {     
    paths: data.CHANGE_THIS.map((param) => ({
      params: { id: param.id },
    })),
    fallback: false,
  };
};

CHANGE_THIS是遵循 JSON 響應中的數據的查詢類型。

對於 getStaticProps

export const getStaticProps = async ({
  params,
}) => {
  const { data } = await client.query({
    query: GetLaunchPastByID ,
    variables: { LaunchID: params.id, idType: "UUID" }, // the idType is optional, and the LaunchID is what you'll use for querying by it*
  });

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

launchPastQueryByID 是這樣的：

const GetLaunchPastByID = gql`
  query LaunchPastByID($LaunchID: UUID!) { // UUID is id type
    CHANGE_THIS(id: $LaunchID) {
      id
      //...
    }
  }
`;

抱歉沒有給您正確的查詢，spacex.land 目前已關閉。