Question

我将react-apollo与Next.js结合使用，就像在example from the Next.js repo中所示。

我想将其与next-with-apollo软件包集成，该软件包不仅为我们提供initialState，而且还为我们提供了headers。

Next.js仓库init-apollo.js中的示例如下所示

import { ApolloClient, InMemoryCache, HttpLink } from 'apollo-boost'
import fetch from 'isomorphic-unfetch'

let apolloClient = null

// Polyfill fetch() on the server (used by apollo-client)
if (!process.browser) {
  global.fetch = fetch
}

function create (initialState) {
  // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
  return new ApolloClient({
    connectToDevTools: process.browser,
    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
    link: new HttpLink({
      uri: `${process.env.ENDPOINT}/graphql`, // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`,
      request: operation => {
        operation.setContext({
          fetchOptions: {
            credentials: 'include',
          }
        })
      }
    }),
    cache: new InMemoryCache().restore(initialState || {})
  })
}

export default function initApollo (initialState) {
  // Make sure to create a new client for every server-side request so that data
  // isn't shared between connections (which would be bad)
  if (!process.browser) {
    return create(initialState)
  }

  // Reuse client on the client-side
  if (!apolloClient) {
    apolloClient = create(initialState)
  }

  return apolloClient
}

我想像这样从headers包中实现next-with-apollo参数

import withApollo from 'next-with-apollo'
import ApolloClient from 'apollo-boost'

function createClient({ headers }) {

  return new ApolloClient({
    uri: `${process.env.ENDPOINT}/graphql`,
    request: operation => {
      operation.setContext({
        fetchOptions: {
          credentials: 'include',
        },
        headers
      })
    }
  })

}

export default withApollo(createClient)

headers参数使我可以从Cookie中获取数据。

我尝试执行此操作，但出现错误：init-apollo.js

function create (initialState, headers) {
  // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
  return new ApolloClient({
    connectToDevTools: process.browser,
    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
    link: new HttpLink({
      uri: `${process.env.ENDPOINT}/graphql`, // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`,
      request: operation => {
        operation.setContext({
          fetchOptions: {
            credentials: 'include',
          },
          headers
        })
      }
    }),
    cache: new InMemoryCache().restore(initialState || {})
  })
}
export default withApollo(({ ctx, headers, initialState }) => {

  if (!process.browser) {
    return create(initialState, headers)
  }

  // Reuse client on the client-side
  if (!apolloClient) {
    apolloClient = create(initialState, headers)
  }

  return apolloClient

})

这样做，给了我奇怪的错误。 Next.js repo example的TypeError: Cannot read property 'displayName' of undefined中的with-apollo-client.js。

我希望通过headers函数以某种方式访问create()。我如何获得访问权限？还有其他方法吗？

如何用react-apollo SSR实现next-with-apollo？

0 个答案: