malpaux / apollo-offline Goto Github PK

View Code? Open in Web Editor NEW

186.0 14.0 8.0 111 KB

An offline toolkit for the Apollo client

Home Page: https://www.npmjs.com/package/apollo-offline

License: BSD 3-Clause "New" or "Revised" License

TypeScript 100.00%

apollo-client graphql redux offline offline-first web-app react typescript

apollo-offline's People

Stargazers

Watchers

Forkers

millergregor musbell lolatravel sneerin derickwarshaw falsecz rodnandes alexlu0917

apollo-offline's Issues

Query Refetch

In many cases (e.g. blogs, news, etc.) query results should be updated immediately after a user regains internet access.

Using a __refetch__ flag in a query could indicate that it should be executed again once the detectNetwork method passed in with the redux-offline config detects a network connection. Additionally, retries of pending queries/mutations could be watched and used to determine the current network status.

Preventing offline behaviour on mutations

I am wondering whether there is a way of preventing the offline behaviour on mutations. It seems to just to not resolve/reject when calling them.

Subscriptions

I get that it's not possible tu support subscriptions while offline but at the moment i receive an error if subscriptions are used.
probably the provided networkInterface doen't have the subscribe && unsubscribe functions implemented

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

@MLPXBrachmann I'm still cutting my teeth on the React ecosystem, and am getting the above mentioned error when doing the following:

Rehyrdated.js

import React from 'react';
import { connect } from 'react-redux';

export const Rehydrated = connect(({ rehydrated }) => ({ rehydrated }))
((props) => props.rehydrate ? props.children : props.loading);

app.js

import Rehydrated from './components/Rehydrated';

      <ApolloProvider store={store} client={client}>
        <Rehydrated>
            <App>
        </Rehydrated>
      </ApolloProvider>

Can you tell me what exactly I'm doing incorrectly in Rehyrdated.js and what specifically { rehydrated } is supposed to reference if any?

Many thanks in advance

How to blacklist key(s) in the redux store?

Thank you for making this great lib!

In the redux-persist docs, there's an option to blacklist certain keys in the persistStore(store, [config, callback]) function.

How can this be achieved with this library? Overriding something in redux-offline/lib/defaults?
Thanks in advance !

Examples

Could you please provide an example?

App hangs indefinitely when attempting to batch queries using createBatchingNetworkInterface

So I updated my ApolloClient.js to use createBatchingNetworkInterface instead of createNetworkInterface, and my app now hangs with the following responses:

Retrying action APOLLO_OFFLINE_QUEUE with delay 1000
middleware.js:50 Retrying action APOLLO_OFFLINE_QUEUE with delay 5000
middleware.js:50 Retrying action APOLLO_OFFLINE_QUEUE with delay 15000
middleware.js:50 Retrying action APOLLO_OFFLINE_QUEUE with delay 30000
middleware.js:50 Retrying action APOLLO_OFFLINE_QUEUE with delay 60000
middleware.js:50 Retrying action APOLLO_OFFLINE_QUEUE with delay 180000

My code is as follows:

const logErrors = {
  applyBatchAfterware({ response }, next) {
    if (!response) {
      response.clone().text().then((bodyText) => {
        console.log('...', `Network Error: ${response.status} (${response.statusText}) - ${bodyText}`);
        next();
      });
    } else {
      response.clone().json().then(({ errors }) => {
        if (errors) {
          console.log('...', 'GraphQL Errors:', errors.map(e => e.message));
        }
        next();
      });
    }
  },
};

const authMiddleware = {
  applyBatchMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the header object if needed.
    }
    
    getStoredState({ storage: localForage }, (err, state = {}) => {
      req.options.headers['authorization'] = state.auth ? `Bearer ${state.auth.token}` : null;
      next();
    });
  }
}

// Create WebSocket client
const wsClient = new SubscriptionClient(SubscriptionClient_URL, {
  reconnect: true,
});

export const { enhancer, networkInterface } = offline( 
  createBatchingNetworkInterface({ 
    uri: networkInterface_URL,
    batchInterval: 10,
    opts: {
      credentials: 'include',
    }
  }),
);

export const enhancer2 = enhancer(config);

networkInterface.use([authMiddleware]);

if (process.env.NODE_ENV !== 'production') {
  networkInterface.useAfter([logErrors]);
}

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
);

const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
  dataIdFromObject: (o) => o.id,
  addTypeName: true,
  shouldBatch: true,
});

networkInterface.setClient(client);

export default client;

What is the issue here?

Missing dependencies

For whatever reason, redux-offline isn't installed when I added this to my project...

(Truncated) yarn list output:

...
├─ [email protected]
│  ├─ graphql-tag@^2.4.2
│  ├─ graphql@^0.10.3
│  └─ zen-observable-ts@^0.4.0
├─ [email protected]
├─ [email protected]
│  └─ default-require-extensions@^1.0.0
├─ [email protected]
├─ [email protected]
│  ├─ delegates@^1.0.0
│  └─ readable-stream@^2.0.6
...

401. Will it retry on 401?

Will this framework do retry during 401?

How to access item from localStorage?

@MLPXBrachmann So I'm attempting to access the following item (token) in localStorage:

{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHA...","__typename":"SigninPayload"}}

localStorage.getItem('reduxPersist:apollo');

gives me the entire localStocrage state, but when I do

localStorage.getItem('token');

I get a null value back.

What am I overlooking here?