With GraphQL starting to take off in popularity, the intent of this baseline is to provide an example for anyone who is considering GraphQL for their problem domain or is simply experimenting.
GraphQL provides an expressive, declarative way to define data. Combined with tools from Apollo, it provides an easier way to consume, mutate, and subscribe to data from an API. Buying into the GraphQL stack means no more confusion around:
- How does the client dynamically get data it needs without one-off routes or janky query handling?
- What is the best XHR client to use for data management?
- How does one effectively cache data client side?
- How does one effectively subscribe to data changes on the client side?
Instead of a traditionally imperative way to obtain data, using GraphQL largely follows a declarative model similar to React: the front-end is focused on the "what" versus the "how"
This scaffold introduces a more "backend-centric" way of constructing a GraphQL Server. Specifically, the pattern of
- Uses Express and graphql-server-express
- Uses babel by default for Express to enable truly "Universal JavaScript" on the front-end and backend
- Uses Sequelize for "code-first" ORM/data modeling
- Uses Knex for "database-first" querying
- Uses redis for distributed session management
- Uses jsonwebtoken for JWT and refresh token generation
- Uses bcrypt for localized password hashing
- Uses jest for unit testing
- Includes create-react-app as a client-side SPA
- Supports Visual Studio Code development out of the box
Note: The docker-compose.yml defines all of these in relation to this app's Dockerfile. This is simply for reference if you want to run this locally.
| Environment Variable Name | Purpose | Sample Value |
|---|---|---|
| DATABASE_URL | The URI to your Postgres database | postgres://postgres@127.0.0.1:61001/graphql-baseline |
| REDIS_URL | The URI to your redis instance | redis://127.0.0.1:61000 |
| REDIS_USER_TOKENS_DB | The redis DB index where to store JWT's | 1 |
| API_SECRET | The secret with which to sign JWT's | shhh_this_should_be_secure |
| RECREATE_SCHEMA | If set to true, will drop and recreate all Sequelize Models' source tables | true |
- Clone this repo
- At the root of the repo, execute
docker-compose build - At the root of the repo, execute
docker-compose up - Browse to
http://localhost:64002/explorerfor the GraphiQL server running on Node - Browse to
http://localhost:64003for the React SPA
This scaffold is completely containerized in Docker, meaning you do not have to worry about any local dependencies apart from Docker and VS Code.
Your container is the source of your code going forward. While it has a localized node_modules on both server and client to prevent platform-specific compilation problems (with things like bcrypt), you can still manage dependencies within and it will reflect on your local package.json.
To do this, you simply need to bash into the container by executing: docker exec -i -t reactjstampabay_graphql /bin/bash. This will open a terminal in the container running your code. You can then add dependencies as normal, using yarn add some_library.
To exit from the container's bash, simply execute exit
- Browse to
http://localhost:64003for the React SPA - Open Chrome DevTools and debug like a normal SPA
- Note: Any changes to
client/srcwill reflect on the Docker container
- Note: Any changes to
- Open VS Code
- Execute the
Attach to Nodemontask - Place breakpoints in any files under
server- Note: Any changes to
serverwill reflect on the Docker container
- Note: Any changes to
This project fully supports deployment to a Heroku web dyno. The only items needed to be established are the environment variables listed above.