react-fullstack-apollo-basic

🚀 Basic starter code for a fullstack app based on React, GraphQL & Apollo Client.

Technologies

• Frontend
  • React: Frontend framework for building user interfaces
  • Apollo Client: Fully-featured, production ready caching GraphQL client
• Backend
  • Prisma: Turns your database into a GraphQL API
  • graphql-yoga: Fully-featured GraphQL server with focus on easy setup, performance & great developer experience
  • prisma-binding: GraphQL binding for Prisma services

Requirements

You need to have the following things installed:

• Node 8+
• GraphQL CLI: npm i -g graphql-cli

Getting started

# 1. Bootstrap GraphQL server in directory `my-app`, based on `react-fullstack-basic` boilerplate
graphql create my-app --boilerplate react-fullstack-basic

# 2. When prompted, choose the Prisma cluster you want to deploy to
# e.g. prisma-eu1 or prisma-us1 to deploy to a public cluster (recommended)
# or locally (requires Docker)

# 3. Navigate into the `server` directory of the new project
cd my-app/server

# 4. Start the server
yarn start # the server is now running on http://localhost:4000

# 5. Open a new tab in the terminal and navigate back into my-app;
# then run the app
cd ..
yarn start

# 6. Open http://localhost:4000 in your browser

Docs

Commands

• yarn start starts GraphQL server on http://localhost:4000 (only allows access to the _appl)
• yarn dev starts GraphQL server opens the GraphQL Playground for the projects defined in .graphqlconfig.yml
• yarn playground opens the GraphQL Playground for the projects defined in .graphqlconfig.yml
• yarn prisma <subcommand> access to local version of Prisma CLI (e.g. yarn prisma deploy)

Project structure

/sever - configuration files

• .graphqlconfig.yml GraphQL configuration file containing the endpoints and schema configuration. Used by the graphql-cli and the GraphQL Playground. See graphql-config for more information.

/database - Prisma service

• database/prisma.yml The configuration file for your database service (documentation).
• database/datamodel.graphql contains the data model that you define for your database service (written in SDL).

/src - application server

• src/schema.graphql defines your application schema. It contains the GraphQL API that you want to expose to your client applications.
• src/index.js is the entry point of your server, putting everything together and starting the GraphQLServer from graphql-yoga.

/src/generated - generated files

• src/generated/prisma.graphql defines the database schema. It contains the GraphQL API exposed by the Prisma Database. This file is automatically generated every time yarn prisma deploy is executed, according to the datamodel in database/datamodel.graphql.

Contributing

Your feedback is very helpful, please share your opinion and thoughts! If you have any questions, join the #graphql-boilerplates channel on our Slack.