apolloClient.ts

import {useMemo} from 'react'
import {ApolloClient, createHttpLink, InMemoryCache, makeVar, NormalizedCacheObject} from '@apollo/client'
import merge from 'deepmerge'
import isEqual from 'lodash/isEqual'
import {setContext} from "@apollo/client/link/context";


export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';
export const LOCALSTORAGE_TOKEN = "login-token";


let apolloClient: ApolloClient<NormalizedCacheObject>;

let token : any = '';

const ISSERVER = typeof window === "undefined";


if (!ISSERVER) {
    token = localStorage.getItem(LOCALSTORAGE_TOKEN);
}

export const isLoggedInVar = makeVar(Boolean(token));
export const authTokenVar = makeVar(token);





const httpLink = createHttpLink({
    uri: "https://seokkao-page-backend.herokuapp.com/graphql"
});

const authLink = setContext((_, {headers}) => {
    return {
        headers: {
            ...headers,
            "x-jwt": authTokenVar() || "",
        }
    }
});


function createApolloClient() {
    return new ApolloClient({
        ssrMode: typeof window === 'undefined',
        link: authLink.concat(httpLink),
        cache: new InMemoryCache({
            typePolicies: {
                Query: {
                    fields: {
                        isLoggedIn: {
                            read() {
                                return isLoggedInVar();
                            },
                        },
                        token: {
                            read() {
                                return authTokenVar();
                            }
                        }
                    },
                },
            },
        }),
    })
}

export function initializeApollo(initialState = null) {
    const _apolloClient = apolloClient ?? createApolloClient()

    // If your page has Next.js data fetching methods that use Apollo Client, the initial state
    // gets hydrated here
    if (initialState) {
        // Get existing cache, loaded during client side data fetching
        const existingCache = _apolloClient.extract()

        // Merge the existing cache into data passed from getStaticProps/getServerSideProps
        const data = merge(initialState as any, existingCache, {
            // combine arrays using object equality (like in sets)
            arrayMerge: (destinationArray, sourceArray) => [
                ...sourceArray,
                ...destinationArray.filter((d) =>
                    sourceArray.every((s) => !isEqual(d, s))
                ),
            ],
        })

        // Restore the cache with the merged data
        _apolloClient.cache.restore(data)
    }
    // For SSG and SSR always create a new Apollo Client
    if (typeof window === 'undefined') return _apolloClient
    // Create the Apollo Client once in the client
    if (!apolloClient) apolloClient = _apolloClient

    return _apolloClient
}

export function addApolloState(client : any, pageProps: any) {
    if (pageProps?.props) {
        pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract()
    }

    return pageProps
}

export function useApollo(pageProps: any) {
    const state = pageProps[APOLLO_STATE_PROP_NAME]
    const store = useMemo(() => initializeApollo(state), [state])
    return store
}