Ability to use AsyncStorage rather than localstorage for react-native about nhost-js-sdk HOT 15 CLOSED

Ok, I think that worked. To use I think you need to do:

npm install nhost/nhost-js-sdk#v0.0.x --save

from nhost-js-sdk.

Maybe this js-sdk should only be for web.

And another one could be for react-native. I do not do any react-native.

from nhost-js-sdk.

relevant https://michalzalecki.com/why-using-localStorage-directly-is-a-bad-idea/

Do someone have an example of a js sdk using localStorage/AsyncStorage?

from nhost-js-sdk.

Which type of example you need?

from nhost-js-sdk.

@elitan
How about leave that as an option? I could pass it in when setting up the config. That's how mobx-persist does it
import { AsyncStorage } from 'react-native'; //mobx-persist, gets data from localStorage or AsyncStorage const hydrate = create({ storage: AsyncStorage, // or AsyncStorage in react-native. // default: localStorage jsonify: true // default: true })

from nhost-js-sdk.

working

https://github.com/nhost/nhost-js-sdk#react-native

from nhost-js-sdk.

This isn't working for me, stilling getting below error on version 0.0.11:

ReferenceError: Can't find variable: localStorage
- node_modules/nhost-js-sdk/index.js:91:33 in refetchToken$

Copying the example from the README:

import nhost from 'nhost-js-sdk';
import { AsyncStorage } from 'react-native';
import { BACKEND_ENDPOINT } from '../config';

const config = {
  endpoint: BACKEND_ENDPOINT,
  storage: AsyncStorage
};

export default new nhost(config);

from nhost-js-sdk.

@nick92 Strange, line 91 should be empty in the 0.0.11 release I think.

Could you confirm you got the correct release?

Maybe remove the node_modules/nhost-js-sdk folder and do a npm install?

from nhost-js-sdk.

Great, clearing that down did work to get the latest version

I am getting two more errors though, on logon I'm getting a 'malformed authorisation header' error, coming from apollo when running a graphql query

I'm also getting a 'java.lang.Double cannot be cast to java.lang.String' error on login and the session isn't persisted when closing the application and re-opening, I have to login every time, possibly due to the casting error being thrown so something isn't being saved?

Can open new issues for the above and provide more information if that's helpful

from nhost-js-sdk.

The malformed authorisation header has to do with Apollo and how you send the Authorization header.

This is an example of how I create an apollo client:

import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';
import { setContext } from 'apollo-link-context';
import { WebSocketLink } from 'apollo-link-ws';
import { HttpLink } from 'apollo-link-http';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import nhost from '../nhost';

const wsurl = `wss://hasura-xxx.nhost.io/v1/graphql`;
const httpurl = `https://hasura-xxx.nhost.io/v1/graphql`;


// create the web socket link
const wsLink = new WebSocketLink({
  uri: wsurl,
  options: {
    reconnect: true,
    connectionParams: () => {
      const jwt_token = nhost.getJWTToken();
      return {
        headers: {
          authorization: jwt_token ? `Bearer ${jwt_token}` : '',
        },
      };
    }),
  },
});

let httpLink = new HttpLink({
  uri: httpurl,
});

const authLink = setContext((a, { headers }) => {
  const jwt_token = nhost.getJWTToken();
  return {
    headers: {
      ...headers,
      authorization: jwt_token ? `Bearer ${jwt_token}` : '',
    },
  };
});

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

const client = new ApolloClient({
  link: authLink.concat(link),
  cache: new InMemoryCache(),
});

// client can be used for ApolloProvider

Second, the java-error I don't know. There is no Java code in Hasura, nor in Hasura Backend Plus that I know of. What service is throwing that error?

from nhost-js-sdk.

The issue with the second error is that you can only store string types the AsyncStorage items, but the user_id is type number

this.storage.setItem('user_id', user_id) ;

The fix for that that error then this number has to be converted to a string

The other issue is that AsyncStorage uses promises, which is different from how localStorage works, so passing the AsyncStorage object into this class doesn't work as the setItem and getItem for the AsyncStorage class is just returning a promise object instead of the string that is stored

So this will have to be catered for in the class, adding in the ability to return the stored object instead of the promise object using async / await e.g.

async setSession(data) {
    const {
      jwt_token,
      refetch_token,
      user_id,
    } = data;

    var claims = jwt_decode(jwt_token);
    this.claims = claims;

    await this.storage.clear();
    await this.storage.setItem('refetch_token', refetch_token);
    await this.storage.setItem('user_id', user_id.toString());

  async refetchToken() {
    // add async / await functionality to get value instead of Promise object

    const user_id = await this.storage.getItem('user_id');
    const refetch_token = await this.storage.getItem('refetch_token');

from nhost-js-sdk.

Ok

This has been taken care of in the latest release where we only use in-memory storage and http only cookies.

Could you create a new branch, add this fix and I'll try to release it as part of the old version?

from nhost-js-sdk.

Can do, can you either create a new branch or give me permissions to do so?

from nhost-js-sdk.

Fork this https://github.com/nhost/nhost-js-sdk/tree/v0.0.x and create a PR. I think that's the easiest way to do it.

Does that work?

from nhost-js-sdk.

Yep, just sent that over

from nhost-js-sdk.