Apollo 客户端 GraphQL 在 Next.js getStaticProps 上创建静态页面

Question

因此，我通过在 Next.js 上实现 Apollo 客户端来研究 GraphQL，我从未实现过 GraphQL API 或使用过 Apollo，并且在构建和操作查询时遇到了一些问题。我想使用 SpaceX GraphQL 服务器创建一些静态页面，并使用 getStaticProps 和 getStaticPath 从 SpaceX 服务器获取前 10 个结果，从这些路由创建静态页面并获取每个 id 的发射详细信息。我的问题是，我无法使启动详细信息查询工作。服务器响应 400。由于结构正确，问题一定是在将变量传递给查询时出现的。

再说一遍，我从未实现过 Apollo 客户端，并且对 graphQL 有非常初级的了解，并且无法找到使用文档的问题。我的代码基于此示例，我刚刚删除了 useQuery Hook，以便我可以在 getStaticProps 内发出请求。 https://www.apollographql.com/docs/react/data/queries/

// [launchId].tsx
import { initializeApollo } from '../../lib/ApolloClient'


export const getStaticPaths: GetStaticPaths = async () => {
  const apolloClient = initializeApollo()
  const {
    data: { launchesPast }
  } = await apolloClient.query({
    query: gql`
      {
        launchesPast(limit: 10) {
          id
        }
      }
    `
  })
  const paths = launchesPast.map(element => {
    return {
      params: {
        launchId: element.id
      }
    }
  })
  return {
    paths,
    fallback: false
  }
}

export const getStaticProps: GetStaticProps = async context => {
  const apolloClient = initializeApollo()
  const { launchId: id } = context.params
  // const id = '100'
  console.log('id', id)
  console.log(typeof id)
  const query = gql`
    query Launch($id: id) {
      launch(id: $id) {
        details
      }
    }
  `

  const {
    loading,
    error = null,
    data: { launch }
  } = await apolloClient.query({ query: query, variables: { id: id } })

  return {
    props: {
      launch,
      loading,
      error
    },
    revalidate: 20
  }
}

//ApolloClient.ts

function createApolloClient(): ApolloClient<NormalizedCacheObject> {
  return new ApolloClient({
    // ssrMode: typeof window === 'null',
    link: new HttpLink({
      uri: 'https://api.spacex.land/graphql/'
    }),
    cache: new InMemoryCache()
  })
}

/*
// ApolloClient Singleton
*/
export function initializeApollo(
  initialState = null
): ApolloClient<NormalizedCacheObject> {
  const _apolloClient = apolloClient ?? createApolloClient()

  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract()

    // Restore the cache using the data passed from
    // getStaticProps/getServerSideProps combined with the existing cached data
    _apolloClient.cache.restore({ ...existingCache, ...initialState })
  }

  // For SSG and SSR always create a new Apollo Client
  if (typeof window === 'undefined') return _apolloClient

  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient
  return _apolloClient
}

export function useApollo(
  initialState: null
): ApolloClient<NormalizedCacheObject> {
  const store = useMemo(() => initializeApollo(initialState), [initialState])
  return store
}

Answer 1

对于任何搜索此内容的人来说，这是对 SpaceX GraphQL API 的愚蠢阅读。typeof id是ID（当然，我知道），这样就解决了。

const { launchId: id } = context.params
 const query = gql`
   query($id: ID!) {
     launch(id: $id) {
       id
       details
     }
   }
 `

 const {
   loading,
   error = null,
   data: { launch = null }
 } = await apolloClient.query({ query: query, variables: { id: id } })