Apollo Client GraphQL 在 Next.js getStaticProps 上创建静态页面

Posted 2023-03-08

【中文标题】Apollo Client GraphQL 在 Next.js getStaticProps 上创建静态页面

【英文标题】：Apollo Client GraphQL creating static pages on Next.js getStaticProps

【发布时间】：2021-03-31 11:52:51

【问题描述】：

所以我通过在 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(
    // s-s-rMode: 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 s-s-r 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

【参考方案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  )

【讨论】：

我也在尝试从 graphql 响应中制作 Next.js 页面。决定使用 spacex api 而不是我自己的，因为现在不用担心 auth，并且类型也为 String。这是我找到的最相关的答案