From c613c9108376545dd05e5ae77337b1de5c32c51d Mon Sep 17 00:00:00 2001 From: Amandeep Singh Date: Tue, 4 Feb 2020 11:38:31 +1100 Subject: [PATCH 1/2] Added headers options while creating ApolloClient instance for server requests. For the profile page server side request, the authenticated data was coming back as null. This was happening as we were not configuring the ApolloClient instance with headers option. Adding headers options would forward the cookie into the server side request. --- demo-projects/meetup/site/lib/initApollo.js | 7 ++++--- demo-projects/meetup/site/lib/withApollo.js | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/demo-projects/meetup/site/lib/initApollo.js b/demo-projects/meetup/site/lib/initApollo.js index fd9c8d3724f..db850027ab9 100644 --- a/demo-projects/meetup/site/lib/initApollo.js +++ b/demo-projects/meetup/site/lib/initApollo.js @@ -8,7 +8,7 @@ const { let apolloClient = null; -function create(initialState) { +function create(initialState, req) { // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient return new ApolloClient({ connectToDevTools: process.browser, @@ -18,16 +18,17 @@ function create(initialState) { credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers` // Use fetch() polyfill on the server fetch: !process.browser && fetch, + headers: req && req.headers }), cache: new InMemoryCache().restore(initialState || {}), }); } -export default function initApollo(initialState) { +export default function initApollo(initialState, req) { // 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); + return create(initialState, req); } // Reuse client on the client-side diff --git a/demo-projects/meetup/site/lib/withApollo.js b/demo-projects/meetup/site/lib/withApollo.js index 694759cc0ac..826b7dbc42c 100644 --- a/demo-projects/meetup/site/lib/withApollo.js +++ b/demo-projects/meetup/site/lib/withApollo.js @@ -13,12 +13,12 @@ export default App => { const { Component, router, - ctx: { res }, + ctx: { res, req }, } = ctx; // Run all GraphQL queries in the component tree // and extract the resulting data - const apollo = initApollo(); + const apollo = initApollo(null, req); ctx.ctx.apolloClient = apollo; From c7837027d43eb1afb273badc4e1397892792760f Mon Sep 17 00:00:00 2001 From: Amandeep Singh Date: Wed, 5 Feb 2020 13:39:33 +1100 Subject: [PATCH 2/2] lint prettier fix --- demo-projects/meetup/site/lib/initApollo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo-projects/meetup/site/lib/initApollo.js b/demo-projects/meetup/site/lib/initApollo.js index db850027ab9..1457c7a3a5d 100644 --- a/demo-projects/meetup/site/lib/initApollo.js +++ b/demo-projects/meetup/site/lib/initApollo.js @@ -18,7 +18,7 @@ function create(initialState, req) { credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers` // Use fetch() polyfill on the server fetch: !process.browser && fetch, - headers: req && req.headers + headers: req && req.headers, }), cache: new InMemoryCache().restore(initialState || {}), });