1
- import React from 'react'
2
- import Head from 'next/head'
3
1
import { ApolloClient , ApolloProvider , HttpLink , InMemoryCache , NormalizedCacheObject } from '@apollo/react-hooks'
4
2
import fetch from 'isomorphic-unfetch'
5
3
import { NextPageContext } from 'next'
4
+ import Head from 'next/head'
6
5
import { destroyCookie , parseCookies , setCookie } from 'nookies'
7
- import { AuthService , TOKEN_COOKIE_NAME , USER_COOKIE_NAME } from './services/AuthService'
8
- import { UserTokens } from './typings/UserTokens'
9
- import ViewerContextProvider from '../components/providers/ViewerContextProvider'
10
6
import PageLayout from '../components/common/PageLayout/PageLayout'
7
+ import ViewerContextProvider from '../components/providers/ViewerContextProvider'
11
8
import { User } from '../graphql'
9
+ import { AuthService , TOKEN_COOKIE_NAME , USER_COOKIE_NAME } from './services/AuthService'
10
+ import { UserTokens } from './typings/UserTokens'
12
11
13
12
let globalApolloClient : ApolloClient < NormalizedCacheObject > | null = null
14
13
15
- export function refreshApolloClient ( ) {
14
+ export function refreshApolloClient ( ) {
16
15
globalApolloClient = null
17
16
}
18
17
@@ -30,22 +29,14 @@ interface WithApolloProps {
30
29
* to a next.js PageTree. Use it by wrapping
31
30
* your PageComponent via HOC pattern.
32
31
*/
33
- export function withApollo ( PageComponent : any , { useLayout = true , ssr = true } = { } ) {
34
- const WithApollo = ( {
35
- apolloClient,
36
- apolloState,
37
- tokens,
38
- viewer,
39
- ...pageProps
40
- } : WithApolloProps ) => {
32
+ export function withApollo ( PageComponent : any , { useLayout = true , ssr = true } = { } ) {
33
+ const WithApollo = ( { apolloClient, apolloState, tokens, viewer, ...pageProps } : WithApolloProps ) => {
41
34
const client = apolloClient || initApolloClient ( apolloState , tokens )
42
35
const pageComponent = < PageComponent { ...pageProps } />
43
36
return (
44
37
< ViewerContextProvider viewer = { viewer } >
45
38
< ApolloProvider client = { client } >
46
- {
47
- viewer && useLayout ? < PageLayout > { pageComponent } </ PageLayout > : pageComponent
48
- }
39
+ { viewer && useLayout ? < PageLayout > { pageComponent } </ PageLayout > : pageComponent }
49
40
</ ApolloProvider >
50
41
</ ViewerContextProvider >
51
42
)
@@ -73,7 +64,11 @@ export function withApollo (PageComponent: any, { useLayout = true, ssr = true }
73
64
try {
74
65
tokens = JSON . parse ( tokensJson )
75
66
} catch { }
76
- if ( tokens && tokens . refreshToken && ( ! tokens . accessTokenExpiration || tokens . accessTokenExpiration < new Date ( ) . getTime ( ) ) ) {
67
+ if (
68
+ tokens &&
69
+ tokens . refreshToken &&
70
+ ( ! tokens . accessTokenExpiration || tokens . accessTokenExpiration < new Date ( ) . getTime ( ) )
71
+ ) {
77
72
if ( viewer ) {
78
73
await refreshCredentials ( ctx , viewer . username , tokens )
79
74
tokens = JSON . parse ( tokensJson )
@@ -110,9 +105,8 @@ export function withApollo (PageComponent: any, { useLayout = true, ssr = true }
110
105
...pageProps ,
111
106
apolloClient,
112
107
} }
113
- />
108
+ /> ,
114
109
)
115
-
116
110
} catch ( error ) {
117
111
// Prevent Apollo Client GraphQL errors from crashing SSR.
118
112
// Handle them in components via the data.error prop:
@@ -145,7 +139,7 @@ export function withApollo (PageComponent: any, { useLayout = true, ssr = true }
145
139
* Always creates a new apollo client on the server
146
140
* Creates or reuses apollo client in the browser.
147
141
*/
148
- export function initApolloClient ( initialState : NormalizedCacheObject = { } , tokens ?: UserTokens ) {
142
+ export function initApolloClient ( initialState : NormalizedCacheObject = { } , tokens ?: UserTokens ) {
149
143
// Make sure to create a new client for every server-side request so that data
150
144
// isn't shared between connections (which would be bad)
151
145
if ( typeof window === 'undefined' ) {
@@ -163,18 +157,16 @@ export function initApolloClient (initialState: NormalizedCacheObject = {}, toke
163
157
/**
164
158
* Creates and configures the ApolloClient
165
159
*/
166
- function createApolloClient ( initialState : NormalizedCacheObject = { } , tokens ?: UserTokens ) {
160
+ function createApolloClient ( initialState : NormalizedCacheObject = { } , tokens ?: UserTokens ) {
167
161
const headers : { [ key : string ] : string } = { }
168
162
if ( tokens ) {
169
163
headers . Authorization = `Bearer ${ tokens . accessToken } `
170
164
}
171
165
172
- const endpoint = typeof window === 'undefined' ? process . env . ENDPOINT ! : ''
173
-
174
166
return new ApolloClient ( {
175
167
ssrMode : typeof window === 'undefined' , // Disables forceFetch on the server (so queries are only run once)
176
168
link : new HttpLink ( {
177
- uri : `${ endpoint } /graphql` , // Server URL (must be absolute)
169
+ uri : `${ process . env . NEXT_PUBLIC_API_ENDPOINT } /graphql` , // Server URL (must be absolute)
178
170
credentials : 'same-origin' , // Additional fetch() options like `credentials` or `headers`
179
171
fetch,
180
172
headers,
@@ -186,14 +178,14 @@ function createApolloClient (initialState: NormalizedCacheObject = {}, tokens?:
186
178
return node . username || node . id
187
179
}
188
180
return node . id
189
- }
181
+ } ,
190
182
} ) . restore ( initialState ) ,
191
183
} )
192
184
}
193
185
194
- async function refreshCredentials ( ctx : ApolloPageContext , username : string , tokens : UserTokens ) {
195
- const endpoint = typeof window === 'undefined' ? process . env . ENDPOINT ! : ''
196
- const res = await fetch ( ` ${ endpoint } /api/v1/auth/token` , { // TODO
186
+ async function refreshCredentials ( ctx : ApolloPageContext , username : string , tokens : UserTokens ) {
187
+ const res = await fetch ( ` ${ process . env . NEXT_PUBLIC_API_ENDPOINT } /api/v1/auth/token` , {
188
+ // TODO
197
189
method : 'POST' ,
198
190
headers : {
199
191
Accept : 'application/json' ,
@@ -202,15 +194,20 @@ async function refreshCredentials (ctx: ApolloPageContext, username: string, tok
202
194
body : JSON . stringify ( {
203
195
username,
204
196
refreshToken : tokens . refreshToken ,
205
- } )
197
+ } ) ,
206
198
} )
207
199
208
200
if ( res . status >= 200 && res . status < 300 ) {
209
- setCookie ( ctx , TOKEN_COOKIE_NAME , JSON . stringify ( {
210
- ...tokens ,
211
- ...( await res . json ( ) ) ,
212
- __typename : undefined ,
213
- } ) , { } )
201
+ setCookie (
202
+ ctx ,
203
+ TOKEN_COOKIE_NAME ,
204
+ JSON . stringify ( {
205
+ ...tokens ,
206
+ ...( await res . json ( ) ) ,
207
+ __typename : undefined ,
208
+ } ) ,
209
+ { } ,
210
+ )
214
211
} else if ( res . status === 401 ) {
215
212
// invalid refresh token, remove all cookies
216
213
destroyCookie ( ctx , USER_COOKIE_NAME )
0 commit comments