Клиент Apollo GraphQL создает статические страницы на Next.js getStaticProps

Итак, я изучаю GraphQL, реализуя клиент Apollo на Next.js, я никогда не реализовывал API GraphQL и не использовал Apollo, и у меня есть некоторые проблемы с созданием и обработкой запросов. Я хочу создать несколько статических страниц с помощью сервера SpaceX GraphQL, и я использую getStaticProps и getStaticPath для получения первых 10 результатов с сервера SpaceX, создания статических страниц из этих маршрутов и получения сведений о запуске для каждого из идентификаторов. Моя проблема в том, что я НЕ МОГУ заставить работать запрос сведений о запуске. Сервер отвечает 400. Поскольку структура верна, проблема должна быть при передаче переменной в запрос.

Опять же, я никогда не реализовывал клиент Apollo, у меня очень начальные знания о graphQL, и я не мог найти проблему при использовании документации. Я основал свой код на этом примере, я просто удалил хук useQuery, чтобы я мог сделать запрос внутри 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.info('id', id)
  console.info(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
}