How to use @apollo/client - 10 common examples

},
      })
    : 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'));
}

: 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
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.

HttpLink,
    split,
} from '@apollo/client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { App } from './App';

const wsLink = new WebSocketLink({
    uri: `ws://localhost:8085/query`,
    options: {
        reconnect: true
    }
});

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(),

import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { App } from './App';

const wsLink = new WebSocketLink({
    uri: `ws://localhost:8085/query`,
    options: {
        reconnect: true
    }
});

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', () => {

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 (

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 (

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 (

import { ChakraProvider } from "@chakra-ui/core";

import { split, HttpLink } from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";
// import { WebSocketLink } from "apollo-link-ws";
import { WebSocketLink } from "@apollo/client/link/ws";
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import { useState, useEffect } from "react";

const hostname = process.browser ? window.location.host : "127.0.0.1:8080";
const tls = process.browser ? window.location.protocol : "http:";

const https = tls === "http:" ? "http" : "https";
const wss = tls === "http:" ? "ws" : "wss";

const httpLink = new HttpLink({
    uri: `${https}://${hostname}/graphql`,
    headers: {
        Origin: `${https}://${hostname}`,
    },
});

const wsLink = process.browser
    ? new WebSocketLink({
          uri: `${wss}://${hostname}/graphql`,
          options: {
              reconnect: true,
          },
      })
    : null;

const splitLink = process.browser

request(operation: Operation, _next: NextLink): Observable {
    return new Observable((observer) => {
      var channelId = Math.round(Date.now() + Math.random() * 100000).toString(16)
      var actionName = this.actionName
      var connectionParams = (typeof this.connectionParams === "function") ?
        this.connectionParams(operation) : this.connectionParams
      var channel = this.cable.subscriptions.create(Object.assign({},{
        channel: this.channelName,
        channelId: channelId
      }, connectionParams), {
        connected: function() {
          channel.perform(
            actionName,
            {
              query: operation.query ? print(operation.query) : null,
              variables: operation.variables,
              // This is added for persisted operation support:
              operationId: (operation as {operationId?: string}).operationId,