The complete app is running on https://prisma-graphql-nextjs-rho.vercel.app/ check it yourself to see the result.
This is a demo project allowing the user to sign-up/sign-up and create, view and bookmark posts. It uses postgres for data storage, s3 for file storage, auth0 for authentication, prisma as orm, graphql as communication transport.
- Rename
.env.example
to.env
and setup required variables; - Use
npx prisma db push
command to sync database according to defenitions defined inprisma/schema.prisma
- Seed data using
npx prisma db seed
command (checkoutprisma/seed.ts
) - Auth0 is used, so custom action for login flow is needed, with code below, the action will call a hook after user is authenticated trough auth0
const fetch = require('node-fetch') exports.onExecutePostLogin = async (event, api) => { const SECRET = event.secrets.AUTH0_HOOK_SECRET const URL = 'https://YOURDOMAIN/api/auth/hook' if (event.user.app_metadata.localUserCreated) { return } const email = event.user.email const request = await fetch(URL, { method: 'post', body: JSON.stringify({ email, secret: SECRET }), headers: { 'Content-Type': 'application/json' }, }) const response = await request.json() api.user.setAppMetadata('localUserCreated', true) }
- Run
yarn dev
to start development
components/
- common ui elementsgraphql/
- type defenitions and resolvers for graphql serverprisma/
- database schema defenition and seed scriptlib/
- common librariespages/api/auth
- auth0 setuppages/api/graphql.ts
- graphql endpoint using apollo serverpages/api/upload.ts
- s3 upload endpointpages/index.ts
- home pagepages/create.ts
- create post pagepages/favorites.ts
- favorites pagepages/posts.ts
- my posts page
type Query {
my(limit: Int!, cursor: String): [Post]
favorites(limit: Int!, cursor: String): [Post]
posts(limit: Int!, cursor: String, userId: String): [Post]
post(id: String!): Post
user(id: String!): User
}
type Mutation {
create(title: String, description: String, imageId: String): Post!
bookmark(id: String): Post!
}
type MediaFile {
id: String
mimetype: String
url: String
}
type Post {
id: ID!
title: String!
description: String!
image: MediaFile
user: User!
}
type User {
id: ID!
email: String!
image: String
}