In the previous post I added a React Native ticking timer. I now have enough client-side parts and it’s time to wire up the client app to a server. This cookbook should be helpful to anyone doing it for the first time.
Run rake graphql:schema:idl to generate a schema.graphql file and copy it to the client app’s schema folder. This will have to be done every time the Rails API GraphQL schema changes.
React Native Client
Signed In vs. Signed Out
I used a switch navigator to toggle between the signed-in and signed-out states in 33-minutes-app@9f252c. Each state is its own stack navigator.
The entire app is that navigator.
To toggle between the states, navigate to either SignedIn or SignedOut (see the mutations below).
The Relay Quick Start Guide is pretty good. We throw in react-relay with yarn add react-relay and relay-compiler with yarn add -dev relay-compiler. Add a relay script into package.json.
Copy-paste a relay environment into app/Environment.js. Note my hard-coded http://localhost:3000/graphql for the Rails server. I will make this dynamic in the future.
Create User Mutation
Copy-paste a relay-style mutation into app/mutations/CreateUserMutation.js.
Create a User
Invoke the mutation, switch to a signed-in navigator upon success, or set an error message otherwise.
Login is very similar. For now we’re using cookies to store a session and don’t remember anything on the client, which means that reloading the app logs the user out.
Show Some Data
To show data wrap up a GraphQL query into a QueryRenderer. You’ll always need one.