GraphQL Authentication with React Native & Apollo [Part 2/2]

GraphQL authentication with React Native & Apollo  #GraphQL #ReactNative #Apollo

  • We’ll use gql to write our graphql query and the graphql higher order component to tap into the Apollo client.We know that our mutation looks something like this (from working with it directly in Launchpad in part 1).
  • Now we need to to be able to pass variables from our user to the mutation.Finally, we want to make this mutation available to the Register component via this.props so that the component agnostic from the Apollo bindings.Now to use it we’ll go to the end of our handleSubmit function…
  • Click “Log Out”, refresh the app, and you’ll see it no longer brings you to profile.Login with Email and PasswordLogging in with email and password is just like sign up, we’re just calling a different mutation.
  • I’ll let the code do the talking.Now to call the login function available on this.props, save the JWT and change screens (on success) or show an error.Showing User InformationThe final thing we’ll do, to demonstrate that things are actually working and it’s not just a big facade, is show the…
  • The server is expecting the JWT to be coming in the authorization header and uses that to find the current user.To pass this token along with the request we’ll use setContext from the apollo-link-context which is another apollo link we’ll use.

This is the second and final part of a series where I cover how to setup authentication with React Native, GraphQL, and MongoDB. Below is part 1 where we setup the server. In this part we’ll be…
Continue reading “GraphQL Authentication with React Native & Apollo [Part 2/2]”

Tackling React Native Storage — Part 1 – Eric Kim – Medium

Tackling #ReactNative Storage - Part 1  #redux

  • Results is auto-updating no need to re-fetch the data const todoItemsResults = store.getTodoItems() const mapStateToProps = (state, props) => ({ …
  • Tip 2: Create a wrapper around Realm
  • According to Realm getStarted guide, Realm.
  • When you are dealing with a large amount of data, or simply require a faster local storage, consider using Realm.
  • You still need to update the UI because React does not know that Realm.

Making data persist in React Native can be hard. I have worked with AsyncStorage, RealmDB, and Firebase using React Native. Today I am going to cover RealmDB but also briefly touch on AsyncStorage…
Continue reading “Tackling React Native Storage — Part 1 – Eric Kim – Medium”