Как реализовать Next-with-Apollo с SSR реагировать-Apollo? - PullRequest
Новая
       52

Как реализовать Next-with-Apollo с SSR реагировать-Apollo?

0 голосов
/ 16 мая 2019

Я использую react-apollo с Next.js, как это показано в примере из репозитория Next.js .

Я хочу интегрировать его с 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

})

Это дало мне странные ошибки.TypeError: Cannot read property 'displayName' of undefined из with-apollo-client.js примера репо Next.js .

Я хочу как-то получить доступ к headers в функции create().Как мне получить доступ?Есть ли другой способ?

...