Soya Next
  • Introduction
  • Packages
    • soya-next
    • soya-next-cli
    • soya-next-scripts
    • soya-next-server
  • Getting Started
    • Setup
    • Directory Structure
    • Creating an App
    • Build the App for Production
  • User Guide
    • Analyzing Dependencies
    • Configure Redux Store
    • Custom Babel Configuration
    • Custom Document
    • Custom Marlint Configuration
    • Custom Routing
    • Typescript Configuration
    • Universal Environment Configuration
  • Migration Guide
    • 0.4.x to 0.5.x
  • API Reference
    • applyReducers([reducers])
    • createPage([...connectArgs])(Page, [reducers])
    • createRouter(app, [options])
    • withLocale
    • LocaleLink
  • Examples
    • Apollo
    • Authentication
    • CSS Modules
    • CSS Modules with SCSS
    • Custom Routes
    • Internationalization
    • Internationalization with Redux
    • Redirection
    • TodoMVC
  • License
Powered by GitBook
On this page
  • Example
  • Quickstart
  • 1. Install the Graphcool CLI
  • 2. Define data model
  • 3. Deploy the GraphQL server
  • 4. Connect the frontend app with your GraphQL API
  • 5. Install dependencies & run locally
  • Next steps
  • Help & Community
  1. Examples

Apollo

PreviousExamplesNextAuthentication

Last updated 7 years ago

  • : Frontend framework for building user interfaces

  • : Fully-featured, production ready caching GraphQL client

  • : Backend development framework based on GraphQL + Serverless

Example

Quickstart

npm install -g graphcool-framework

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

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-framework init server

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

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

2. 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!
}

3. Deploy the GraphQL server

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).

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.

4. Connect the frontend app with your GraphQL API

Paste the Simple API endpoint from the previous step to ./config/default.json as graphqlEndpoint:

{
  // replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step
  "graphqlEndpoint": "__SIMPLE_API_ENDPOINT__"
}

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

5. Install dependencies & run locally

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

Next steps

For more information on how to get started refer to the full "React & Apollo"- or watch the corresponding .

1. Install the

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

Help & Community

Say hello in graphcool or visit the if you run into issues or have questions.

tutorial
video
Graphcool CLI
deploy
Documentation
Advanced GraphQL features
Authentication & Permissions
Implementing business logic with serverless functions
Slack
Graphcool Forum
React
Apollo Client
Graphcool
Slack Status