Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prisma-labs/graphql-prisma-typescript
🏡 GraphQL server reference implementation (Airbnb clone) in Typescript using Prisma & graphql-yoga
https://github.com/prisma-labs/graphql-prisma-typescript
airbnb graphql graphql-binding graphql-database graphql-server graphql-yoga prisma
Last synced: 5 days ago
JSON representation
🏡 GraphQL server reference implementation (Airbnb clone) in Typescript using Prisma & graphql-yoga
- Host: GitHub
- URL: https://github.com/prisma-labs/graphql-prisma-typescript
- Owner: prisma-labs
- License: mit
- Created: 2017-11-19T18:47:23.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-22T09:46:41.000Z (about 2 years ago)
- Last Synced: 2024-12-11T01:05:48.032Z (12 days ago)
- Topics: airbnb, graphql, graphql-binding, graphql-database, graphql-server, graphql-yoga, prisma
- Language: TypeScript
- Homepage:
- Size: 3.88 MB
- Stars: 748
- Watchers: 19
- Forks: 108
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Airbnb Clone - GraphQL Server Example with Prisma
This project demonstrates how to build a production-ready application with Prisma and [`graphql-yoga`](https://github.com/graphcool/graphql-yoga). The API provided by the GraphQL server is the foundation for an application similar to [AirBnB](https://www.airbnb.com/).
## Get started
> **Note**: `prisma` is listed as a _development dependency_ and _script_ in this project's [`package.json`](./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:
```sh
git clone [email protected]:graphcool/graphql-server-example.git
```Next, navigate into the downloaded folder and install the NPM dependencies:
```sh
cd graphql-server-example
yarn install
```### 2. Deploy the Prisma database service
You can now [deploy](https://www.prismagraphql.com/docs/reference/cli-command-reference/database-service/prisma-deploy-kee1iedaov) the Prisma service (note that this requires you to have [Docker](https://www.docker.com) installed on your machine - if that's not the case, follow the collapsed instructions below the code block):
```sh
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`.
1. Run `yarn prisma deploy`.
1. When prompted by the CLI, select a public cluster (e.g. `prisma-eu1` or `prisma-us1`).
1. Replace the [`endpoint`](./src/index.js#L23) 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 [`prisma/seed.graphql`](prisma/seed.graphql) to seed some initial data in the database. The CLI is aware of this file because it's listed in [`prisma/prisma.yml`](prisma/prisma.yml#L11) 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:
```sh
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](./src/schema.graphql)) as well as the underlying Prisma API (defined in the auto-generated [Prisma database schema](./src/generated/prisma.ts)) directly.
Inside the Playground, you can start exploring the available operations by browsing the built-in documentation.
## Testing the API
Check [`queries/booking.graphql`](queries/booking.graphql) and [`queries/queries.graphql`](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`](queries/booking.graphql).
## Deployment
A quick and easy way to deploy the GraphQL server from this repository is with [Zeit Now](https://zeit.co/now). After you downloaded the [Now Desktop](https://zeit.co/download) app, you can deploy the server with the following command:
```sh
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`](.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](https://www.prismagraphql.com/docs/tutorials/graphql-server-development/deployment-with-now-ahs1jahkee).
## 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 mutationThis is because the endpoint for the Prisma service is hardcoded in [`index.js`](index.js#L23). 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`.
1. 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