Apollo link state setup?

Apollo link state setup?

Im trying to set up Apollo link state following the docs:&nbsp;<a href="https://github.com/apollographql/apollo-link-state" target="_blank">https://github.com/apollographql/apollo-link-state</a>

Im trying to set up Apollo link state following the docs: https://github.com/apollographql/apollo-link-state

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { HttpLink, InMemoryCache, ApolloClient } from 'apollo-client-preset';
    import { WebSocketLink } from 'apollo-link-ws';
    import { ApolloLink, split } from 'apollo-link';
    import { getMainDefinition } from 'apollo-utilities';
    import { AUTH_TOKEN } from './constant';
    import RootContainer from './components/RootContainer';
    import { ApolloProvider } from 'react-apollo';

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

const middlewareLink = new ApolloLink((operation, forward) =&gt; {

ation token from local storage if it exists const tokenValue = localStorage.getItem(AUTH_TOKEN); operation.setContext({ headers: { Authorization: tokenValue ? Bearer ${tokenValue} : '', }, }); return forward(operation); });

const httpLinkAuth = middlewareLink.concat(httpLink);

const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000`,
  options: {
    reconnect: true,
    connectionParams: {
      Authorization: `Bearer ${localStorage.getItem(AUTH_TOKEN)}`,
    },
  },
});

const link = split(
  ({ query }) =&gt; {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' &amp;&amp; operation === 'subscription';
  },
  wsLink,
  httpLinkAuth,
);

const client = new ApolloClient({
  clientState: {
    defaults: {
      isConnected: true,
    },
    resolvers: {
      Mutation: {
        updateNetworkStatus: (_, { isConnected }, { cache }) =&gt; {
          cache.writeData({ data: { isConnected } });
          return null;
        },
      },
    },
  },

  link: ApolloLink.from([link]),

  cache: new InMemoryCache(),

  connectToDevTools: true,
});

const token = localStorage.getItem(AUTH_TOKEN);

ReactDOM.render(
  &lt;ApolloProvider client={client}&gt;
    &lt;RootContainer token={token} /&gt;
  &lt;/ApolloProvider&gt;,
  document.getElementById('root'),
);

When I try a query:

{
  networkStatus @client {
    isConnected
  }
}

I get this error

    {
  "errors": [
    {
      "message": "Response not successful: Received status code 400",
      "locations": [
        "Error: Response not successful: Received status code 400\n    at throwServerError (http://localhost:3000/static/js/bundle.js:5296:17)\n    at http://localhost:3000/static/js/bundle.js:5321:13"
      ]
    }
  ]
}

UPDATED CODE: I'm no longer getting errors but the query returned is always an empty object.

import React from 'react';
import ReactDOM from 'react-dom';
import { HttpLink, InMemoryCache, ApolloClient } from 'apollo-client-preset';
import { WebSocketLink } from 'apollo-link-ws';
import { ApolloLink, split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { AUTH_TOKEN } from './constant';
import RootContainer from './components/RootContainer';
import { ApolloProvider } from 'react-apollo';
import { withClientState } from 'apollo-link-state';
import { gql } from 'apollo-boost';

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

const middlewareLink = new ApolloLink((operation, forward) => { // get the authentication token from local storage if it exists const tokenValue = localStorage.getItem(AUTH_TOKEN); // return the headers to the context so httpLink can read them operation.setContext({ headers: { Authorization: tokenValue ? Bearer ${tokenValue} : '', }, }); return forward(operation); });

// authenticated httplink const httpLinkAuth = middlewareLink.concat(httpLink);

const wsLink = new WebSocketLink({ uri: ws://localhost:4000, options: { reconnect: true, connectionParams: { Authorization: Bearer ${localStorage.getItem(AUTH_TOKEN)}, }, }, });

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

const cache = new InMemoryCache();

const stateLink = withClientState({ cache, resolvers: { Query: { networkStatus: (, args, { cache }) => { return cache.readQuery({ query: gql query { networkStatus @client { isConnected } } , }); }, }, Mutation: { updateNetworkStatus: (, { isConnected }, { cache }) => { const data = { networkStatus: { __typename: 'NetworkStatus', isConnected, }, }; cache.writeData({ data }); return null; }, }, }, defaults: { networkStatus: { __typename: 'NetworkStatus', isConnected: true, }, }, });

// apollo client setup const client = new ApolloClient({ link: ApolloLink.from([stateLink, link]), cache, connectToDevTools: true, });

const token = localStorage.getItem(AUTH_TOKEN);

ReactDOM.render( <ApolloProvider client={client}> <RootContainer token={token} /> </ApolloProvider>, document.getElementById('root'), );

If I remove defaults then the query isn't recognised. So I think im either writing or reading from the store incorrectly.

apollo

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to disable cache in apollo-link or apollo-client?

I'm using&nbsp;<em>apollo-client</em>,&nbsp;<em>apollo-link</em>&nbsp;and&nbsp;<em>react-apollo</em>, I want to fully disable cache, but don't know how to do it.

How to disable cache in apollo-link or apollo-client?

I'm using&nbsp;<em>apollo-client</em>,&nbsp;<em>apollo-link</em>&nbsp;and&nbsp;<em>react-apollo</em>, I want to fully disable cache, but don't know how to do it.

Full-Stack GraphQL With Apollo & NextJS — Part 3: Server-Side

This is the third and final part of my series which explores implementing GraphQL using Apollo and NextJS.Part 1 dealt with the app setup, and Part 2 dealt with the Client-Side in depth. I would highly recommend reading them first before getting into this article, unless you are already comfortable with Client-Side GraphQL using Apollo.

Need Help in apollo-graphql

hi sir, I am Abhijeet from India. I just started working on graphql.I am trying to set reminder in apollo-graphql and I have no idea how it works in apollo. I am doing only backend graphql (nodejs) . help me for set a reminder in backend using apollo-graphql. This is urgent for me to create my new project.

GraphQL and Apollo with Andrew Mead

GraphQL and Apollo are a match made in heaven. Get started with GraphQL and Apollo by creating a backend GraphQL layer for blog posts.