How to use apollo-link-state - 10 common examples

import { dataIdFromObject } from '../id-generation';

const defaultSchema = `
type Query {
    dummy: Int
}
type Mutation {
    dummy: Int
}
`;

const cache = new InMemoryCache({
    dataIdFromObject: (object) => getDataIdFromObject(object),
});

const linkState = withClientState({
    cache,
    resolvers,
    defaults,
    // typeDefs: defaultSchema.concat(schema as any), // if client schema exist

});
const links = [linkState];

const client = new ApolloClient({
    queryDeduplication: true,
    link: ApolloLink.from(links),
    cache,
});


function getDataIdFromObject(result: any) {

wsClient.onReconnected(() => {
      // console.log('onReconnected');
    });

    apiLink = ApolloLink.split(
      operation => {
        const operationAST = getOperationAST(operation.query, operation.operationName);
        return !!operationAST && operationAST.operation === 'subscription';
      },
      new WebSocketLink(wsClient),
      queryLink
    );
  }

  const linkState = withClientState({ ...clientResolvers, cache });

  const allLinks = [
    ...(createLink ? createLink.map((create: any) => create(getApolloClient)) : []),
    linkState,
    apiLink
  ];

  if (settings.app.logging.apolloLogging && (!__TEST__ || typeof window !== 'undefined')) {
    allLinks.unshift(new LoggingLink({ logger: log.debug.bind(log) }));
  }

  const clientParams: any = {
    link: ApolloLink.from(allLinks),
    cache
  };
  if (__SSR__ && !__TEST__) {

wsClient.onReconnected(() => {
      // console.log('onReconnected');
    });

    apiLink = ApolloLink.split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
      },
      new WebSocketLink(wsClient),
      queryLink
    );
  }

  const linkState = withClientState({ ...clientResolvers, cache });

  const allLinks = [
    ...(createLink ? createLink.map((create: any) => create(getApolloClient)) : []),
    linkState,
    apiLink
  ];

  if (settings.app.logging.apolloLogging && (!__TEST__ || typeof window !== 'undefined')) {
    allLinks.unshift(new LoggingLink({ logger: log.debug.bind(log) }));
  }

  const clientParams: any = {
    link: ApolloLink.from(allLinks),
    cache,
    resolvers: (clientResolvers || ({} as any)).resolvers
  };

link = split(
        // split based on operation type
        ({ query }) => {
          const { kind, operation } = getMainDefinition(query)
          return kind === 'OperationDefinition' && operation === 'subscription'
        },
        wsLink,
        link
      )
    }
  } else {
    // On the server, we don't want WebSockets and Upload links
  }

  const stateLink = withClientState({
    cache,
    resolvers,
    defaults,
  })

  link = stateLink.concat(link)

  const apolloClient = new ApolloClient({
    link,
    cache,
    // Additional options
    ...(ssr
      ? {
          // Set this on the server to optimize queries when SSR
          ssrMode: true,
        }

// split based on operation type
          ({ query }) => {
            const { kind, operation } = getMainDefinition(query)
            return kind === 'OperationDefinition' &&
              operation === 'subscription'
          },
          wsLink,
          link
        )
      }
    }
  }

  if (clientState) {
    console.warn(`clientState is deprecated, see https://vue-cli-plugin-apollo.netlify.com/guide/client-state.html`)
    stateLink = withClientState({
      cache,
      ...clientState,
    })
    link = from([stateLink, link])
  }

  const apolloClient = new ApolloClient({
    link,
    cache,
    // Additional options
    ...(ssr ? {
      // Set this on the server to optimize queries when SSR
      ssrMode: true,
    } : {
      // This will temporary disable query force-fetching
      ssrForceFetchDelay: 100,

public create(config: PresetConfig) {
    const cache =
      config && config.cacheRedirects
        ? new InMemoryCache({cacheRedirects: config.cacheRedirects})
        : new InMemoryCache();

    const stateLink =
      config && config.clientState
        ? withClientState({...config.clientState, cache})
        : false;

    const errorLink =
      config && config.onError
        ? onError(config.onError)
        : onError(({graphQLErrors, networkError}) => {
            if (graphQLErrors) {
              graphQLErrors.map(({message, locations, path}) =>
                // tslint:disable-next-line
                console.log(
                  `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
                ),
              );
            }
            if (networkError) {
              // tslint:disable-next-line

export default function createClient(resolvers = {}) {
  const merged = merge({ ...defaultResolvers }, resolvers)
  console.log(merged)
  return new ApolloClient({
    cache,
    link: withClientState({
      resolvers: merge({ ...defaultResolvers }, resolvers),
      defaults,
      typeDefs
    })
  })
}

export const createStateLink = ({ cache, resolvers, defaults, ...otherOptions }) => {
  const stateLink = withClientState({
    cache,
    defaults: defaults || getStateLinkDefaults(),
    resolvers: resolvers || getStateLinkResolvers(),
    ...otherOptions,
  });
  return stateLink;
};

const create = initialState => {
  const cache = new InMemoryCache().restore(initialState || {});
  const stateLink = withClientState({ cache, ...initData });
  return new ApolloClient({
    connectToDevTools: process.browser,
    link: from([authMiddleware, stateLink, httpLink]),
    ssrMode: !process.browser,
    cache: cache
  });
};

import { InMemoryCache } from 'apollo-cache-inmemory'
import { withClientState } from 'apollo-link-state'

export const cache = new InMemoryCache()

export const stateLink = withClientState({
  cache,
  defaults: {
    auth: {
      __typename: 'Auth',
      token: localStorage.getItem('Bida-App-Github-Token'),
    },
  },
  resolvers: {},
})