GraphcoolDocs
FAQ

Vue & Apollo Quickstart

Last updated a day ago Edit this page

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

For this quickstart tutorial, we have prepared a repository that contains the full Vue 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 Vue application. Let's get started!

1

Clone the example repository that contains the Vue application:

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

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

  • Post: Renders a single post item
  • ListPage: Renders a list of post items
  • CreatePage: Allows to create a new post 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 @model {
  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!
}
quickstart-with-apollo/server/types.graphql

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 Vue application with the GraphQL API from your Graphcool service.

7

Paste the HTTP endpoint for the Simple API that you saved after running graphcool deploy into ./src/main.js as the uri argument in the createNetworkInterface call:

1
2
// replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step
const networkInterface = createNetworkInterface({ uri: '__SIMPLE_API_ENDPOINT__' })
quickstart-with-apollo/src/main.js

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

8

Install dependencies and run the app:

yarn install
yarn start # open http://localhost:3000 in your browser

#Learn more

Was this page helpful?