import { HttpLink, InMemoryCache, ApolloClient, ApolloProvider } from '@apollo/client'
import { cardFiltersVar, arenaVar } from './localVariables'
import fetch from 'isomorphic-unfetch'
import { offsetLimitPagination } from '@apollo/client/utilities'
import App from 'next/app'
import Head from 'next/head'
import React from 'react'

const createApolloClient = (initialState, ctx) => {
    // The `ctx` (NextPageContext) will only be present on the server.
    // use it to extract auth headers (ctx.req) or similar.
    
    const cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            cards: offsetLimitPagination(['filters']),
            cardFilters: {
              read() {
                return cardFiltersVar()
              },
            },
            arena: {
              read() {
                return arenaVar()
              },
            },
          },
        },
        cards: {
          keyFields: ['id'],
        },
      },
    }).restore(initialState)
    
    return new ApolloClient({
      ssrMode: Boolean(ctx),
      link: new HttpLink({
        uri: 'http://localhost:3000/api/graphql', // Server URL (must be absolute)
        credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
        fetch,
      }),
      cache,
      connectToDevTools: true,
    })
  }