Subscribe now

Using GraphCool with React Native [06.13.2017]

What is Serverless

Serverless is a new trend that says the focus of a software development should be in the business, in the code and not in the servers. The idea is the developers don't need to worry with the server side of things.

Graphcool

We will see a GraphQL serverless tool, Graphcool. It provides us a production-ready GraphQL backend to build our apps faster. It includes integration with various third-party services, authentication and more. Let's check it out!

We have other episodes where we talked about GraphQL, if you want to check those out:

Today, we will look at Graphcool and use its example with the Apollo client.

Let's create an account on their website, we can log in with Github. We will create a new project called MyPosts. This will be an app containing only an image and a description for this image.

We will use their quickstart app they already have with Apollo. This is very similar to what we did in a previous episode.

So, let's clone this repo.

The app

Let's install the dependencies:

yarn install

And run our app:

react-native run-ios

The app is really simple. It has two screens. The first screen is a list of posts with each image. The second screen is a screen to create a post, by passing the image URL and the post description.

Everything starts in the root component where we pass our endpoint API and we call our ListPage component.

const networkInterface = createNetworkInterface({
  uri: "API_ENDPOINT"
});
const client = new ApolloClient({ networkInterface });

export default (
  <ApolloProvider client={client}>
    <ListPage />
  </ApolloProvider>
);

In our ListPage component, we use the following query:

const allPostsQuery = gql`
  query {
    allPosts(orderBy: createdAt_DESC) {
      id
      imageUrl
      description
    }
  }`

And this query gets our id, imageUrl and description. The rest of the ListPage component is just a list showing each Post and its image.

We don't have our schema yet. Let's create that!

Creating our schema

We will need to create our schema. We will have a Post type with imageUrl and description. We saw in previous episodes the bang (!) mark at the end means the field is required.

type Post implements Node {
  createdAt: DateTime!
  description: String!
  id: ID! @isUnique
  imageUrl: String!
  updatedAt: DateTime!
}

Doing this, we will have these pending changes:

Post: A new type with the name `Post` is created.
description: A new field with the name `description` and type `String!` is created.
imageUrl: A new field with the name `imageUrl` and type `String!` is created.

Let's apply our changes. We can see in our Graph View or just in this list, our new type Post.

The mutation

Let's set up our app, by passing the Graph cool API URL to the root component. Now our app is connected with the back-end.

Graphcool has a playground where we can try things. It is using the following mutation to create our posts. Let's use this mutation and create a new Post:

mutation {
  createPost(
    imageUrl: "https://dummyimage.com/600x400/000/fff"
    description: "My Post from the Graphcool website"
  ) {
    id
  }
}

Once we run this mutation, we can refresh our app and see this new Post we have created in our app. This is cool!

We can also see what we have created in the Data tab.

Integrating with Slack

Graphcool has some integration with Auth0, Algolia, and more. We can also write our own functions. We will write a function that posts to Slack via Slack’s webhook.

Let's go to Functions, create a new function and our function will be a server side subscription. It will post to slack once we have a new Post.

On the inline code, we will put our code, it does a POST request to our slack, and we will pass the post description and image url.

const fetch = require('isomorphic-fetch')
const FormData =require('form-data')

module.exports = function (input, log) {
  const url = 'YOUR_SLACK_WEB_HOOK_URL'

  var description = input.data.Post.node.description
  var imageUrl = input.data.Post.node.imageUrl
  var payload = `{ "text": "${description}\n ${imageUrl}","channel": "#general"}`;

  fetch(url, {
    headers: {
      'Content-Type': "application/json"
    },
    method: 'POST',
    body: payload
  })
}

And in the subscription query we need to pass description and imageUrl.

Let's save, that, open our slack and create a new Post in our App. Boom! It posts in our slack the description and the image we have posted!

We can do anything you want with these webhooks, here we show just one example with Slack.

Summary

Today we saw how to use a serverless tool that can help us quickly prototype a React Native app. It has nice integrations with third-party services and it gives us a production-ready GraphQL backend.

Resources