• Stars
    star
    1,201
  • Rank 38,995 (Top 0.8 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ’ฅ A sophisticated GraphQL with Apollo, Express and PostgreSQL boilerplate project.

fullstack-apollo-express-postgresql-boilerplate

Build Status Slack Greenkeeper badge

A full-fledged Apollo Server with Apollo Client starter project with React and Express. Read more about it in this tutorial to build it yourself.

Family of universal fullstack repositories:

Server Applications:

Client Applications:

Features of Client + Server

  • React (create-react-app) with Apollo Client
    • Queries, Mutations, Subscriptions
  • Node.js with Express and Apollo Server
    • cursor-based Pagination
  • PostgreSQL Database with Sequelize
    • entities: users, messages
  • Authentication
    • powered by JWT and local storage
    • Sign Up, Sign In, Sign Out
  • Authorization
    • protected endpoint (e.g. verify valid session)
    • protected resolvers (e.g. e.g. session-based, role-based)
    • protected routes (e.g. session-based, role-based)
  • performance optimizations
    • example of using Facebook's dataloader
  • E2E testing

Installation

  • git clone [email protected]:the-road-to-graphql/fullstack-apollo-express-postgresql-boilerplate.git
  • cd fullstack-apollo-express-postgresql-boilerplate
  • touch .env
  • npm install
  • fill out .env file (see below)
  • start PostgreSQL database
  • npm start
  • visit http://localhost:8000 for GraphQL playground

.env file

Since this boilerplate project is using PostgreSQL, you have to install it for your machine and get a database up and running. You find everything for the set up over here: Setup PostgreSQL with Sequelize in Express Tutorial. After you have created a database and a database user, you can fill out the environment variables in the server/.env file.

DATABASE=mydatabase

DATABASE_USER=postgres
DATABASE_PASSWORD=postgres

SECRET=asdlplplfwfwefwekwself.2342.dawasdq

The SECRET is just a random string for your authentication. Keep all these information secure by adding the .env file to your .gitignore file. No third-party should have access to this information.

Testing

  • adjust test:run-server npm script with TEST_DATABASE environment variable in package.json to match your testing database name
    • to match it from package.json: createdb mytestdatabase with psql
  • one terminal: npm run test:run-server
  • second terminal: npm run test:execute-test

Want to learn more about React + GraphQL + Apollo?

More Repositories

1

react-graphql-github-apollo

๐Ÿš€ A React + Apollo + GraphQL GitHub Client. Your opportunity to learn about these technologies in a real world application.
JavaScript
1,590
star
2

fullstack-apollo-express-mongodb-boilerplate

๐Ÿ’ฅA sophisticated GraphQL with Apollo, Express and MongoDB boilerplate project.
JavaScript
338
star
3

the-road-to-graphql

๐Ÿ““The Road to GraphQL: Your journey to master pragmatic GraphQL in JavaScript
234
star
4

fullstack-apollo-react-boilerplate

๐Ÿ’ฅA sophisticated Apollo in React boilerplate project.
JavaScript
145
star
5

the-road-to-graphql-chinese

๐Ÿ““The Road to GraphQL: Your journey to master pragmatic GraphQL in JavaScript
111
star
6

fullstack-apollo-subscription-example

A minimal Apollo Server 2 with Apollo Client 2 with Subscriptions application.
JavaScript
73
star
7

react-graphql-github-vanilla

A React GraphQL example using GitHub's GraphQL API with vanilla JS
JavaScript
72
star
8

react-apollo-client-example

A minimal React application which is powered by Apollo Client and GitHub's GraphQL API.
JavaScript
38
star
9

react-graphql-github-apollo-starter-kit

A GraphQL/Apollo in React boilerplate project to get you started with a tutorial to learn about these technologies.
JavaScript
21
star
10

react-apollo-link-state-example

A React application using Apollo Client with apollo-link-state for local state management.
JavaScript
21
star
11

react-apollo-client-with-redux-example

A React application using Apollo Client for remote data and Redux for local data side by side for state management.
JavaScript
21
star
12

react-apollo-client-testing-example

A React with Apollo Client application with a mocked GraphQL server and tested Query and Mutation components.
JavaScript
17
star
13

react-apollo-client-mocking-example

A minimal React application using Apollo Client with a mocked GitHub's GraphQL API by implementing an own GraphQL schema.
JavaScript
17
star
14

react-graphql-client-library

A simple GraphQL client for React applications. It's not powerful, but it works. It is not meant for production, but for you as inspiration to contribute to the ecosystem.
JavaScript
15
star
15

node-apollo-boost-github-graphql-api

A standalone GraphQL application that uses Apollo Client for consuming the GitHub GraphQL API
JavaScript
13
star
16

react-apollo-client-optimistic-ui-example

A minimal React application which is powered by Apollo Client and GitHub's GraphQL API with optimistic UI.
JavaScript
9
star
17

react-apollo-client-apollo-cache-redux-example

A React application using Apollo Client with apollo-cache-redux to manage local and remote state with a combined solution.
JavaScript
8
star
18

react-apollo-client-pagination-example

A minimal React application which is powered by Apollo Client and GitHub's GraphQL API with pagination.
JavaScript
7
star
19

react-apollo-client-prefetching-example

A minimal React application which is powered by Apollo Client and GitHub's GraphQL API with prefetching data.
JavaScript
3
star
20

the-road-to-graphql-spanish

The Road To GraphQL Spanish
1
star