jaibeee / graphql-prisma-typescript

🏡 GraphQL server reference implementation (Airbnb clone) in Typescript using Prisma & graphql-yoga

Airbnb Clone - GraphQL Server Example with Prisma

This project demonstrates how to build a production-ready application with Prisma and graphql-yoga. The API provided by the GraphQL server is the foundation for an application similar to AirBnB.

Get started

Note: prisma is listed as a development dependency and script in this project's package.json. This means you can invoke the Prisma CLI without having it globally installed on your machine (by prefixing it with yarn), e.g. yarn prisma deploy or yarn prisma playground. If you have the Prisma CLI installed globally (which you can do with npm install -g prisma), you can omit the yarn prefix.

1. Download the example & install dependencies

Clone the repository with the following command:

git clone [email protected]:graphcool/graphql-server-example.git

Next, navigate into the downloaded folder and install the NPM dependencies:

cd graphql-server-example
yarn install

2. Deploy the Prisma database service

You can now deploy the Prisma service (note that this requires you to have Docker installed on your machine - if that's not the case, follow the collapsed instructions below the code block):

cd prisma
docker-compose up -d
cd ..
yarn prisma deploy

I don't have Docker installed on my machine

To deploy your service to a public cluster (rather than locally with Docker), you need to perform the following steps:

1. Remove the cluster property from prisma.yml.
2. Run yarn prisma deploy.
3. When prompted by the CLI, select a public cluster (e.g. prisma-eu1 or prisma-us1).
4. Replace the endpoint in index.ts with the HTTP endpoint that was printed after the previous command.

Notice that when deploying the Prisma service for the very first time, the CLI will execute the mutations from database/seed.graphql to seed some initial data in the database. The CLI is aware of this file because it's listed in database/prisma.yml under the seed property.

3. Start the GraphQL server

The Prisma database service that's backing your GraphQL server is now available. This means you can now start the server:

yarn dev

The dev script starts the server (on http://localhost:4000) and opens a GraphQL Playground where you get acces to the API of your GraphQL server (defined in the application schema) as well as the underlying Prisma API (defined in the auto-generated Prisma database schema) directly.

Inside the Playground, you can start exploring the available operations by browsing the built-in documentation.

Testing the API

Check queries/booking.graphql and queries/queries.graphql to see several example operations you can send to the API. To get an understanding of the booking flows, check the mutations in queries/booking.graphql.

Deployment

A quick and easy way to deploy the GraphQL server from this repository is with Zeit Now. After you downloaded the Now Desktop app, you can deploy the server with the following command:

now --dotenv .env.prod

Notice that you need to create the .env.prod file yourself before invoking the command. It should list the same environment variables as .env but with different values. In particular, you need to make sure that your Prisma service is deployed to a cluster that accessible over the web.

Here is an example for what .env.prod might look like:

PRISMA_STAGE="prod"
PRISMA_CLUSTER="public-tundrapiper-423/prisma-us1"
PRISMA_ENDPOINT="http://us1.prisma.sh/public-tundrapiper-423/prisma-airbnb-example/dev"
PRISMA_SECRET="mysecret123"
APP_SECRET="appsecret321"

To learn more about deploying GraphQL servers with Zeit Now, check out this tutorial.

Troubleshooting

I'm getting the error message [Network error]: FetchError: request to http://localhost:4466/auth-example/dev failed, reason: connect ECONNREFUSED when trying to send a query or mutation

This is because the endpoint for the Prisma service is hardcoded in index.js. The service is assumed to be running on the default port for a local cluster: http://localhost:4466. Apparently, your local cluster is using a different port.

You now have two options:

1. Figure out the port of your local cluster and adjust it in index.js. You can look it up in ~/.prisma/config.yml.
2. Deploy the service to a public cluster. Expand the I don't have Docker installed on my machine-section in step 2 for instructions.

Either way, you need to adjust the endpoint that's passed to the Prisma constructor in index.js so it reflects the actual cluster domain and service endpoint.

License

MIT