How to use the @apollo/client.ApolloClient function in @apollo/client

},
      })
    : null;

const splitLink = process.browser
    ? split(
          ({ query }) => {
              const definition = getMainDefinition(query);
              return definition.kind === "OperationDefinition" && definition.operation === "subscription";
          },
          wsLink,
          httpLink
      )
    : httpLink;

const client = new ApolloClient({
    link: splitLink,
    cache: new InMemoryCache(),
});

const SupersenseApp = ({ Component, pageProps }: AppProps) => {
    return (
        
            
                
            
        
    );
};

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to

const httpLink = new HttpLink({ uri: 'http://localhost:8085/query' });


// depending on what kind of operation is being sent
const link = split(
    // split based on operation type
    ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return kind === 'OperationDefinition' && operation === 'subscription';
    },
    wsLink,
    httpLink,
);

const apolloClient = new ApolloClient({
    link: link,
    cache: new InMemoryCache(),
});

if (module.hot) {
    module.hot.accept('./App', () => {
        const NextApp = require('./App').default;
        render();
    })
}

function render(component) {
    ReactDOM.render(
        {component}
    , document.getElementById('root'));
}

export default function App() {
  const client = new ApolloClient({
    link: new HttpLink({
      credentials: 'same-origin',
      fetch: authenticatedFetch(window.app), // created in shopify_app.js
      uri: '/graphql'
    }),
    cache: new InMemoryCache()
  });

  return (

},
});

const splitLink = split(
    ({ query }) => {
        const definition = getMainDefinition(query);
        return (
            definition.kind === "OperationDefinition" &&
            definition.operation === "subscription"
        );
    },
    wsLink,
    httpLink,
);

const client = new ApolloClient({
    link: splitLink,
    cache: new InMemoryCache(),
});

interface AppProps {}

function App({}: AppProps) {
    return (

import { ApolloClient, InMemoryCache, gql } from "@apollo/client";

const ALL_COUNTRIES = gql`
  query AllCountries {
    countries @client {
      code
      name
      emoji
    }
  }
`;

const client = new ApolloClient({
  cache: new InMemoryCache(),
  resolvers: {
    Query: {
      countries() {
        return [
          {
            code: "AD",
            emoji: "🇦🇩",
            name: "Andorra",
            __typename: "Country"
          },
          {
            code: "AE",
            emoji: "🇦🇪",
            name: "United Arab Emirates",
            __typename: "Country"

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: new HttpLink({
      uri: "/api/graphql/",
    }),
    cache: new InMemoryCache({
      typePolicies: {
        Project: {
          keyFields: ["name"],
        },
      },
    }),
  });
}

import {ApolloClient, InMemoryCache} from '@apollo/client';
import axios from 'axios'

let gqlclient = new ApolloClient ({
    uri:"http://127.0.0.1:10590/query",
    cache: new InMemoryCache()
})

let restclient = axios

export { 
    restclient,
    gqlclient
};

import { ApolloClient, InMemoryCache } from '@apollo/client';

import introspectionResult from './fragmentTypes';

const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache({
    possibleTypes: introspectionResult.possibleTypes,
  }),
});

export default client;