This example shows how to implement a GraphQL server with an email-password-based authentication workflow and authentication rules, based on Prisma, graphql-yoga, graphql-shield & GraphQL Nexus.
Clone the prisma2
branch of this repository:
git clone git@github.com:prisma/prisma-examples.git --depth=1
Install Node dependencies:
cd prisma-examples/experimental/typescript/graphql-auth
npm install
Perform an initial schema migration against your database using the following commands:
npx prisma2 migrate save --name 'init' --experimental
npx prisma2 migrate up --experimental
Note: You're using npx to run Prisma 2 CLI that's listed as a development dependency in
package.json
. Alternatively, you can install the CLI globally usingnpm install -g prisma2
. When using Yarn, you can run:yarn prisma2 dev
.
Alternative: Connect to your own database
Prisma supports MySQL and PostgreSQL at the moment. If you would like to connect to your own database, you can do so by specifying a different data source in the Prisma schema file.
For a MySQL provider:
datasource mysql {
provider = "mysql"
url = "mysql://johndoe:secret42@localhost:3306/mydatabase"
}
OR
For a PostgreSQL provider:
datasource postgresql {
provider = "postgresql"
url = "postgresql://johndoe:secret42@localhost:5432/mydatabase?schema=public"
}
Note: In the above example connection strings,
johndoe
would be the username to your database,secret42
the password,mydatabase
the name of your database, andpublic
the PostgreSQL schema.
Run the following command to generate your Prisma Client API:
npx prisma2 generate
This generates Prisma Client into node_modules/@prisma/client
from where it can be imported like so:
import { PrismaClient } from '@prisma/client'
or
const { PrismaClient } = require('@prisma/client')
The seed
script from package.json
contains some code to seed the database with test data. Execute it with the following command:
npm run seed
Launch your GraphQL server with this command:
npm run dev
Navigate to http://localhost:4000 in your browser to explore the API of your GraphQL server in a GraphQL Playground.
The schema that specifies the API operations of your GraphQL server is defined in ./src/schema.graphql
. Below are a number of operations that you can send to the API using the GraphQL Playground.
Feel free to adjust any operation by adding or removing fields. The GraphQL Playground helps you with its auto-completion and query validation features.
query {
feed {
id
title
content
published
author {
id
name
email
}
}
}
See more API operations
You can send the following mutation in the Playground to sign up a new user and retrieve an authentication token for them:
mutation {
signup(name: "Sarah", email: "sarah@prisma.io", password: "graphql") {
token
}
}
This mutation will log in an existing user by requesting a new authentication token for them:
mutation {
login(email: "sarah@prisma.io", password: "graphql") {
token
}
}
For this query, you need to make sure a valid authentication token is sent along with the Bearer
-prefix in the Authorization
header of the request:
{
"Authorization": "Bearer __YOUR_TOKEN__"
}
With a real token, this looks similar to this:
{
"Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJjanAydHJyczFmczE1MGEwM3kxaWl6c285IiwiaWF0IjoxNTQzNTA5NjY1fQ.Vx6ad6DuXA0FSQVyaIngOHYVzjKwbwq45flQslnqX04"
}
Inside the Playground, you can set HTTP headers in the bottom-left corner:
Once you've set the header, you can send the following query to check whether the token is valid:
{
me {
id
name
email
}
}
You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup
or login
mutation needs to be added to the Authorization
header in the GraphQL Playground.
mutation {
createDraft(
title: "Join the Prisma Slack"
content: "https://slack.prisma.io"
) {
id
published
}
}
You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup
or login
mutation needs to be added to the Authorization
header in the GraphQL Playground. The authentication token must belong to the user who created the post.
mutation {
publish(id: __POST_ID__) {
id
published
}
}
Note: You need to replace the
__POST_ID__
-placeholder with an actualid
from aPost
item. You can find one e.g. using thefilterPosts
-query.
You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup
or login
mutation needs to be added to the Authorization
header in the GraphQL Playground.
{
filterPosts(searchString: "graphql") {
id
title
content
published
author {
id
name
email
}
}
}
You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup
or login
mutation needs to be added to the Authorization
header in the GraphQL Playground.
{
post(id: __POST_ID__) {
id
title
content
published
author {
id
name
email
}
}
}
Note: You need to replace the
__POST_ID__
-placeholder with an actualid
from aPost
item. You can find one e.g. using thefilterPosts
-query.
You need to be logged in for this query to work, i.e. an authentication token that was retrieved through a signup
or login
mutation needs to be added to the Authorization
header in the GraphQL Playground. The authentication token must belong to the user who created the post.
mutation {
deletePost(id: __POST_ID__) {
id
}
}
Note: You need to replace the
__POST_ID__
-placeholder with an actualid
from aPost
item. You can find one e.g. using thefilterPosts
-query.
To make changes to the GraphQL schema, you need to manipulate the Query
and Mutation
types.
Note that the dev
script also starts a development server that automatically updates your schema every time you save a file. This way, the auto-generated GraphQL schema updates whenever you make changes in to the Query
or Mutation
types inside your TypeScript code.
The migrations that were generated throughout the development mode are development migrations that are thrown away once the desired schema has been found. In that case, you need to persist the schema using the lift
subcommands.
To persist your schema migration with Lift, run:
npx prisma2 lift save --name 'init'
npx prisma2 lift up
The first command, lift save
, stores a number of migration files on the file sytem with details about the migration (such as the required migration steps and SQL operations), this doesn't yet affect the database. It also deletes the old development migrations. The second command, lift up
, actually performs the schema migration against the database.
Sometimes, e.g. in CI/CD environments, it can be helpful to generate Photon.js with a CLI command. This can be done with the prisma2 generate command
. If you want to run it in this project, you need to prepend npx
again:
npx prisma2 generate
- Read the holistic, step-by-step Prisma Framework tutorial
- Check out the Prisma Framework docs (e.g. for data modeling, relations or the Prisma Client API)
- Share your feedback in the
prisma2-preview
channel on the Prisma Slack - Create issues and ask questions on GitHub
- Track Prisma 2's progress on
isprisma2ready.com