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'],
          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`
            connectToDevTools: true,

      Javascript language logo
      your recipe card header background


      ).then(() => { // handle the response here. });

      This code uses the ctx object to extract either auth headers (depending on the flag ssrMode) or similar before using it to create a new ApolloClient. The cache is then used to speed up the process of reloading the state when the client connects to the development tools.

      Shortcut: apolloClient.Api


        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.