GraphcoolDocs
FAQ

Android & Apollo Quickstart

Last updated a day ago Edit this page

Get started in 5 min with Android, GraphQL and Apollo Client by building a simple Instagram clone.

For this quickstart tutorial, we have prepared a repository that contains the full Java code for the Instagram clone. All you need to do is create the Graphcool service that will expose the GraphQL API and connect it with the Android application. Let's get started!

1

Clone the example repository that contains the Android application:

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

Feel free to get familiar with the code. The app contains the following classes:

  • ApolloDemoApplication.java: Root application class for global configurations
  • MainActicity.java: Displays the list of post items
  • MainRecyclerViewAdapter.java: Acts as the data source for the list item

Graphcool services are managed with the Graphcool CLI. So before moving on, you first need to install it.

2

Install the Graphcool CLI:

npm install -g graphcool

Now that the CLI is installed, you can use it to create the file structure for new service with the graphcool init command.

3

Create the local file structure for a new Graphcool service inside a directory called server:

# Create a local service definition in a new directory called `server`
graphcool init server

graphcool init creates the local service structure inside the specified server directory:

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

Each of the created files and directories have a dedicated purpose inside your Graphcool service:

  • graphcool.yml: Contains your service definition.
  • types.graphql: Contains the data model and any additional type definitions for your Graphcool service, written in the GraphQL Schema Definition Language (SDL).
  • src: Contains the source code (and if necessary GraphQL queries) for the functions you've configured for your service. Notice that a new service comes with a default "Hello World"-function (called hello in graphcool.yml) which you can delete if you don't want to use it.

Next you need to configure the data model for your service.

4

Open ./server/types.graphql and add the following type definition to it:

1
2
3
4
5
6
7
8
type Post {
  id: ID! @isUnique    # read-only (managed by Graphcool)
  createdAt: DateTime! # read-only (managed by Graphcool)
  updatedAt: DateTime! # read-only (managed by Graphcool)

  description: String!
  imageUrl: String!
}

The changes you introduced by adding the Post type to the data model are purely local so far. So the next step is to actually deploy the service!

5

Navigate to the server directory and deploy your service:

cd server
graphcool deploy

When prompted which cluster you want to deploy to, choose any of the Shared Clusters options (shared-eu-west-1, shared-ap-northeast-1 or shared-us-west-2).

Note: If you haven't authenticated with the Graphcool CLI before, this command is going to open up a browser window and ask you to login. Your authentication token will be stored in the global ~/.graphcoolrc.

You service is now deployed and available via the HTTP endpoints that were printed in the output of the command! The Post type is added to your data model and the corresponding CRUD operations are generated and exposed by the GraphQL API.

Notice that this command also created the local .graphcoolrc inside the current directory. It's used to manage your deployment targets.

6

Save the HTTP endpoint for the Simple API from the output of the graphcool deploy command, you'll need it later!

Note: If you ever lose the endpoint for your GraphQL API, you can simply get access to it again by using the graphcool info command. When using Apollo, you need to use the endpoint for the Simple API.

You can test the API inside a GraphQL Playground which you can open with the graphcool playground command. Feel free to try out the following query and mutation.

Fetching all posts:

1
2
3
4
5
6
7
query {
  allPosts {
    id
    description
    imageUrl
  }
}

Creating a new post:

1
2
3
4
5
6
7
8
mutation {
  createPost(
    description: "A rare look into the Graphcool office"
    imageUrl: "https://media2.giphy.com/media/xGWD6oKGmkp6E/200_s.gif"
  ) {
    id
  }
}

The next step is to connect the Android application with the GraphQL API from your Graphcool service.

7

Paste the Simple API endpoint into ApolloDemoApplication.java as the value for the final variable BASE_URL that's used to instantiate the ApolloClient:

1
2
// replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step
private static final String BASE_URL = "__SIMPLE_API_ENDPOINT__";

To use the Apollo Android Client, you need to install apollo-codegen, a command line tool that will generate Java classes from your GraphQL queries & mutations at build-time.

8

Install apollo-codegen with the following command in your terminal:

npm install -g apollo-codegen

You can find more info the installation process in the Apollo docs.

That's it. The last thing to do is actually launching the application in Android Studio 🚀

#Learn more

Was this page helpful?