This example shows how to implement a GraphQL server with an email-password-based authentication workflow and authentication rules, based on Prisma, Apollo Server, graphql-shield & Nexus Schema. It is based on a SQLite database, you can find the database file with some dummy data at ./prisma/dev.db.
Download this example:
curl https://codeload.github.com/prisma/prisma-examples/tar.gz/latest | tar -xz --strip=2 prisma-examples-latest/typescript/graphql-auth
Install npm dependencies:
cd graphql-auth
npm install
Note that this also generates Prisma Client JS into node_modules/@prisma/client via a postinstall hook of the @prisma/client package from your package.json.
Alternative: Clone the entire repo
Clone this repository:
git clone [email protected]:prisma/prisma-examples.git --depth=1
Install npm dependencies:
cd prisma-examples/typescript/graphql-auth
npm install
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 ./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: "[email protected]", password: "graphql") {
token
}
}This mutation will log in an existing user by requesting a new authentication token for them:
mutation {
login(email: "[email protected]", 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 actualidfrom aPostitem. 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 actualidfrom aPostitem. 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 actualidfrom aPostitem. You can find one e.g. using thefilterPosts-query.
Evolving the application typically requires two steps:
- Migrate your database using Prisma Migrate
- Update your application code
For the following example scenario, assume you want to add a "profile" feature to the app where users can create a profile and write a short bio about themselves.
The first step is to add a new table, e.g. called Profile, to the database. You can do this by adding a new model to your Prisma schema file file and then running a migration afterwards:
// schema.prisma
model Post {
id Int @default(autoincrement()) @id
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int
}
model User {
id Int @default(autoincrement()) @id
name String?
email String @unique
posts Post[]
+ profile Profile?
}
+model Profile {
+ id Int @default(autoincrement()) @id
+ bio String?
+ userId Int @unique
+ user User @relation(fields: [userId], references: [id])
+}Once you've updated your data model, you can execute the changes against your database with the following command:
npx prisma migrate dev --preview-feature
You can now use your PrismaClient instance to perform operations against the new Profile table. Those operations can be used to implement queries and mutations in the GraphQL API.
With the nexus-prisma package, you can expose the new Profile model in the API like so:
// ... as before
const User = objectType({
name: 'User',
definition(t) {
t.model.id()
t.model.name()
t.model.email()
t.model.posts({
pagination: false,
})
+ t.model.profile()
},
})
// ... as before
+const Profile = objectType({
+ name: 'Profile',
+ definition(t) {
+ t.model.id()
+ t.model.bio()
+ t.model.user()
+ },
+})
// ... as before
export const schema = makeSchema({
+ types: [Query, Mutation, Post, User, Profile],
// ... as before
}As the Prisma Client API was updated, you can now also invoke "raw" operations via prisma.profile directly.
const profile = await prisma.profile.create({
data: {
bio: "Hello World",
user: {
connect: { email: "[email protected]" },
},
},
});const user = await prisma.user.create({
data: {
email: "[email protected]",
name: "John",
profile: {
create: {
bio: "Hello World",
},
},
},
});const userWithUpdatedProfile = await prisma.user.update({
where: { email: "[email protected]" },
data: {
profile: {
update: {
bio: "Hello Friends",
},
},
},
});- Check out the Prisma docs
- Share your feedback in the
prisma2channel on the Prisma Slack - Create issues and ask questions on GitHub
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent