In Groups do a standup focusing in your final project. Answer these questions:
- What have you accomplished since class last Thursday?
- What do you plan accomplish now and Thursday? (our last class!)
- What will work on in today's lab time in class?
In Groups review the Final Assessment Study Guide. Identify the things that you know and the things you know less about by explaining them to each other in your group.
https://github.com/Make-School-Courses/FEW-2.9-Technical-Seminar/blob/master/study-guide.md
- Describe Object Relational Mapper (ORM)
- Describe Prisma
- Use ORM (Prisma)
- Use Apollo Server
Object Realtional Mappers act as a middle man between your code and your database. They act as a tranalator of sorts that allows you to write the code that works with your data in the language that the rest of your app is written in.
The code you write, JavaScript in our case, is an Object Oriented language. Data is organized in objects that can be nested. Databases on the other hand are tables which are flat lists.
The ORM provides an abstraction that allows us to access our databases like in the form and with the language that we are working on most of the time.
Prisma is an ORM (Object-Relationship Mapper) the tutorial uses this to connect your GraphQL resolvers to your data through your database.
Prisma implements GraphQL!
Prisma consists of three tools.
- Prisma Client - An auto generated type safe query builder.
- Prisma Migrate - Declarative data model migration system
- Prisma Studio - A GUI to view and edit data in your database
Prisma Client is the code automatically generated by prisma that connects your database to your node source code.
This code will live in your node_modules folder.
Prisma Migrate is the system that updates your client when you make changes to your data model.
You'll need to run a migration if you make changes to your data model that aren't reflected in your existing database.
Prisma Studio is a Graphical User Interface for working with the data in your database managed by Prisma.
Prisma integrates with many databases: PostgreSQL, MySQL, SQLite, etc.
Much like GraphQL Prisma uses a Schema to define data models and relationships.
In the tutorial you'll be defining models for Users, and Links. You'll also define a relationship: A Link is associated with a User, and Users have a list of Links.
Prisma isn't the database. Instead it's the Glue that connects the database with a client.
Client <-- --> Prisma <-- --> Database
Prisma integrates with Express.js, GraphQL, Apollo and more.
All of the Prisma files you will edit live in the prisma folder.
The Auto generated code lives in node_modules/prisma/prisma-client. Since this code is auto generated you won't need to work with this directly.
What is really happening here? Prisma is looking at the schema you created and generating all of the code needed to create, update, delete, and fetch records from the database that you define.
Optional: Try Prisma out through their 5min tutorial: https://www.prisma.io/docs/getting-started/quickstart-typescript
The Prisma Schema describes the data model used by your GraphQL server and how it should map your database.
The datasource is the connection to the database that holds your data.
The tutorial uses Sqlite but Prisma can work with any other database.
We need to tell Prisma what type of database we're working with.
The below generates the Prisma client code. Someone needs to write all of the code that connects Prisma with your database.
generator client {
provider = "prisma-client-js"
}The code created by the generator will live in node_modules/prisma/prisma-client
The Prisma Data Model defines your resources that are stored in your database. These map to the types in your GraphQL schema.
A model should mirror your GraphQL types.
model Link {
// field Type is an id and the value is atomatically generated
id Int @id @default(autoincrement())
// field Type Automatically generated
createdAt DateTime @default(now())
description String
url String
// name Type
postedBy User? @relation(fields: [postedById], references: [id])
postedById Int?
}Apollo Server is an open-source, spec-compliant GraphQL server that's compatible with any GraphQL client, including Apollo Client.
What does that mean? Where Express is a server that supports REST Apollo-Server is a server that works with GraphQL.
Its open source and complies with the GraphQL Spec. Remember GraphQL is a language and a spec, not a library or framework.
You'll use Apollo-Server much the same way you would use an Express server with a few differences:
- Has a single route/endpoint (GraphQL only needs a single endpoint)
- Handles requests with resolvers
- Uses a schema to define queries and their types
Start working on the HowToGRaphQL tutorial.
https://www.howtographql.com/graphql-js/0-introduction/
Running the app with node src/index.js was tedious. Better to add a script to your package.json.
...
"scripts": {
...
"start": "node src/index.js"
},
...
Or better yet use nodemon:
"start": "nodemon src/index.js"
As you work, be careful to note which files code apply to. Some code snippets are shown but are not meant to be usesd.
When a snippet is meant to be used, the tutorial shows the path to the file at the top in small text. keep your eye out for this.
Sometimes there changes to a code snippet. The snippet is shown and the changes are highlighted in gray.
As I worked through the tutorial I ran into a few issues. Here is what I saw and what I did.
I ran into this warning while I was working:
warn(prisma) @prisma/cli has been renamed to prisma. Please uninstall @prisma/cli: npm remove @prisma/cli And install prisma: npm i --save-dev prisma
I ignored this. Seems like it's a version issue. I was able to get everyting working without doing this but I kept seeing the warnings.
src/script.js is just for testing. It's not used for the app itself.
You can use this as a playground of sorts to test ideas out.
I ran into a problem where my database had some bad data. It was a null value in a field that didn't allow for a null value.
I used src.script.js to delete all of my records and start over again.
await prisma.link.deleteMany({})When you get to the section: Authentication. The tutorial will ask you to put a token in the HTTP header in the Graphiql browser. It should look like this:
{
"Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjQsImlhdCI6MTYxNTkzMjczMn0.WjFt25k6eBzFv4nYwVORsSGMzmj_Jm0jnZIgflu6-jI"
}
Note the space after Bearer
The Testing the Authentication Flow section of the Authentication Chapter of the tutorial guides you on how to get this Authorization token and how to put it in the HTTP Header.
If you run into problems that you can't solve try taking a look at the source code for the completed tutorial here:
https://github.com/howtographql/graphql-js
To recap, this is the typical workflow you will follow when updating your data:
- Manually adjust your Prisma data model.
- Migrate your database using the prisma migrate CLI commands we covered.
- (Re-)generate Prisma Client
- Use Prisma Client in your application code to access your database.
You should decide an what you are going to do for the final project
- React + Apollo Tutorial - Complete chapeters 7 and 8
- GraphQL Node Tutorial - Complete chapeters 7 and 8
- Your Custom project
- Server - Solve problems and add subscriptions
- Client - Add CSS!
- Stretch Challenge - React + Apollo tutorial chapters