2 votes
758 views
by Nikolas Burk

Introduction

In this quickstart tutorial, you'll learn how to build a fullstack app with React, GraphQL and Node.js. You will use graphql-yoga as your web server. The server is connected to a Prisma database API using prisma-binding.

To learn more about GraphQL server development and the required architecture, read the corresponding Introduction chapters.

The code for this project can be found as a GraphQL boilerplate project on GitHub.

Install required command line tools

The first thing you need to do is install the command line tools you'll need for this tutorial:

  • prisma is used continuously to manage your Prisma database API
  • graphql-cli is used initially to bootstrap the file structure for your fullstack app with graphql create
Step 1
npm install -g prisma graphql-cli

Bootstrap your React fullstack app

Step 2

Now you can use graphql create to bootstrap your project. With the following command, you name your project my-app and choose to use the react-fullstack-basic boilerplate:

graphql create my-app --boilerplate react-fullstack-basic
cd my-app

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

  • Post: Renders a single post item
  • ListPage: Renders a list of post items
  • CreatePage: Allows to create a new post item
  • DetailPage: Renders the details of a post item and allows to update and delete it

Here is an overview of the generated files in the server directory and their roles in your server setup:

Most important for you at this point are database/datamodel.graphql and src/schema.graphql.

database/datamodel.graphql is used to define your data model. This data model is the foundation for the API that's defined in src/schema.graphql and exposed to your React application.

Here is what the data model looks like:

type Post {
  id: ID! @unique
  isPublished: Boolean! @default(value: "false")
  title: String!
  text: String!
}

Based on this data model Prisma generates the Prisma database schema, a GraphQL schema that defines a CRUD API for the types in your data model. In your case, this is only the Post type. The database schema is stored in database/schema.generated.graphql and will be updated every time you deploy changes to your data model.

You're now set to start the server! 🚀

Start the server

Step 3

Execute the start script that's define in server/package.json:

yarn start

The server is now running on http://localhost:4000.

Launch the React application

The last thing to do is actually launching the application 🚀

Step 4

Navigate back into the root directory of the project and run the app (note that you need to open another tab/window in the terminal because the current tab is used by the GraphQL server):

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

Next steps

  • In this quickstart tutorial, you learned how to get started building a fullstack GraphQL app with React & Node.JS, using Prisma as a "GraphQL ORM" layer. If you want to learn about how the Prisma database layer actually works, you can check out this tutorial in our docs.
  • Learn how to deploy the GraphQL server with Zeit Now or Apex Up.
  • Learn how to build a fully-fledged GraphQL server with authentication, pagination, filters and realtime subscriptions in this in-depth Node & GraphQL tutorial on How to GraphQL.