Question

我有一个使用ApolloGraphQL和Next.js的应用程序用于服务器端渲染。我可以通过next.js和apollo提供的简单示例让一切正常运行，但我遇到了一个问题。我的查询树要求我首先进行变异才能正确填充查询变量。

我已尝试在Query组件中嵌套Mutation组件，但似乎即使我使用其他组件执行此类突变：

class CallCreateCheckout extends Component {
  componentDidMount () {
    this.props.createCheckout({
      variables: { input: {}},
      update: (proxy, data) => {
        console.log(data)
      }
    })
  }

  render () {
    return this.props.children
  }
}

它仍然没有在服务器端执行。在某些背景下，我正在与Shopify API集成以管理销售网站上的订单。他们要求，为了管理用户订单，您必须首先通过API创建checkout对象。所以在页面加载时，我需要检查用户是否已经在cookie中设置了checkoutId，如果不是，我需要运行此突变。

我也尝试过手动执行withApollo HOC内部的变异，如下所示：

try {
  // Run all GraphQL queries

  if (!checkoutId) {
    await apolloClient.mutate({
      mutation: createCheckoutMutation,
      variables: { input: {} },
      update: (proxy, { data }) => {
        //console.log(data)
      }
    })
  } else {
    const { data } = await apolloClient.query({
      query: getCheckout,
      variables: { checkoutId: checkoutId }
    })
  }

  const AppTree = (
    <ApolloProvider client={apolloClient}>
      <App {...appProps} />
    </ApolloProvider>
  )

  await getDataFromTree(AppTree)
} catch (error) {
  // Prevent Apollo Client GraphQL errors from crashing SSR.
  // Handle them in components via the data.error prop:
  // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
}
// getDataFromTree does not call componentWillUnmount
// head side effect therefore need to be cleared manually
Head.rewind()

虽然这确实执行正确（甚至填充了当地的Apollo商店！我可以通过记录apolloClient.cache.extract()来证明，并且看到那里有一个结帐对象），我一直无法弄清楚如何弥补这个与我在整个应用程序中的查询之间的差距，这些查询需要checkoutId才能正确获取。

非常感谢任何想法！

ApolloGraphQL和Next.js的服务器端渲染在getDataFromTree

0 个答案: