我正在构建NextJS
应用程序,并且尝试访问cookie
,因此我可以使用它为Http Header
设置GraphQL Request
,我正在使用apollo-link-context
。这是创建ApolloClient
的代码
function createApolloClient(initialState = {}) {
const httpLink = new HttpLink({ uri: `${baseUrl}/graphql`, credentials: 'same-origin', fetch })
const authLink = setContext((_, prevCtx) => {
let token = ''
if (typeof window === 'undefined') token = getCookieFromServer(authCookieName, REQ)
else token = getCookieFromBrowser(authCookieName)
return ({ headers: { 'Auth-Token': token } })
})
const client = new ApolloClient({
ssrMode: typeof window === 'undefined',
cache: new InMemoryCache().restore(initialState),
link: authLink.concat(httpLink)
})
return client
}
这里的问题是
getCookieFromServer
函数期望将Express Request
作为第二个参数,因此它可以从req.headers.cookie
中提取cookie,而且我不知道从哪里可以得到它。 最佳答案
我终于找到了办法。每当我从服务器发送请求时(在PageComponent.getInitialProps
中),我都会在上下文中设置 header ,然后可以从setContext
访问它:
PageComponent.getInitialProps = async (ctx) => {
...
const token = getCookieFromServer(authCookieName, ctx.req)
const { data } = await client.query({
query,
context: { headers: { 'Auth-Token': token } }
})
...
}
然后在setContext中:
const authLink = setContext((_, prevCtx) => {
let headers = prevCtx.headers || {}
if (!headers['Auth-Token']) {
const token = getCookieFromBrowser(authCookieName)
headers = { ...headers, 'Auth-Token': token }
}
return ({ headers })
})
因此,如果 header 已经存在于先前的上下文中(从服务器发送时就是这种情况),请使用它。如果不存在(从浏览器发送时),请从浏览器获取cookie并进行设置。
我希望有一天会有帮助。