Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
components initial commit Dec 21, 2017
.babelrc initial commit Dec 21, 2017
.flowconfig
.gitignore initial commit Dec 21, 2017
.watchmanconfig
App.js
App.test.js initial commit Dec 21, 2017
README.md
app.json
package.json
yarn.lock initial commit Dec 21, 2017

README.md

React Native & Apollo Quickstart

  • React Native: Javascript framework for building native mobile apps with React
  • Apollo Client: Fully-featured, production ready caching GraphQL client
  • Graphcool: Flexible backend platform combining GraphQL + AWS Lambda

Quickstart

1. Clone example repository

git clone https://github.com/graphcool-examples/react-native-graphql.git
cd react-native-graphql/quickstart-with-apollo

2. Create Graphcool service with the Graphcool CLI

# Install Graphcool Framework CLI
npm install -g graphcool

# Create a new service inside a directory called `server`
graphcool init server

This created the following file structure in the current directory:

.
└── server
    ├── graphcool.yml
    ├── types.graphql
    └── src
        ├── hello.graphql
        └── hello.js

3. Define data model

Next, you need to define your data model inside the newly created types.graphql-file.

Replace the current contents in types.graphql with the following type definition (you can delete the predefined User type):

type Post @model {
  # Required system field
  id: ID! @isUnique # read-only (managed by Graphcool)

  # Optional system fields (remove if not needed)
  createdAt: DateTime! # read-only (managed by Graphcool)
  updatedAt: DateTime! # read-only (managed by Graphcool)

  description: String!
  imageUrl: String!
}

4. Deploy the GraphQL server

You're now ready to put your Graphcool service into production! Navigate into the server directory and deploy the service:

cd server
graphcool deploy

Save the HTTP endpoint for the Simple API from the output, you'll need it in the next step.

Note: You can now test your GraphQL API inside a GraphQL playground. Simply type the graphcool playground command and start sending queries and mutations.

5. Connect the app with your GraphQL API

Paste the Simple API endpoint to ./App.js as the uri argument in the createNetworkInterface call:

// replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step
const httpLink = new HttpLink({ uri: '__SIMPLE_API_ENDPOINT__' })

Note: If you ever lose your endpoint, you can get access to it again with the graphcool info command.

6. Install dependencies & run locally

cd ..
yarn install
yarn start          # open using the Expo app on your phone
# yarn run ios      # open with iOS simulator
# yarn run android  # open with Android emulator

Next steps

Help & Community Slack Status

Join our Slack community if you run into issues or have questions. We love talking to you!

You can’t perform that action at this time.