Coding along with Wes Bos' Advanced React Tutorial.
- Front end framework: React, Next.js (ssr, routing), Styled Components
- Front end GraphQL client: React Apollo, Apollo Client
- Back end GraphQL Server: GraphQL Yoga (express, apollo-server)
- Back end GraphQL Database: Prisma
- Video 14 - Items Creation and Prisma Yoga Flow, is a good reference for setting up new data items (graphql and database)
- datamodel.graphql: file we create / maintain to define data model for prisma db
- run deploy after making any changes
- prisma.graphql: a file generated by prisma, is retrieved by the post deploy hook when datamodel.graphql is deployed to prisma (see package.json deploy script)
- describes the prisma API for this data
- schema.graphql: file we create / maintain to define the public facing API
- datamodel.graphql: file we create / maintain to define data model for prisma db
- GraphQL workflow
- create mutation or query in schema.graphql
- create the resolver in Mutation.js or Query.js
- define gql mutation or query in component
- using cookie to store logged in user (JWT - json web token) instead of local storage, because that better supports SSR
- in Signup component, Form component method is set to post, which prevents the password from showing up in the url in error conditions (default method is get, which would)
- Apollo - Optimistic Response: Apollo provides an optimistic response feature, which allows the developer to provide an expected response from the server mutation
- this causes the update method to be called twice. once immediately, using the value in optimisticResponse for payload. then called a second time, when the actual server response is received (which uses the actual payload value)
- Downshift
- Stripe / StripeCheckout
- lodash debounce
- format-dns -does date formatting, similar to moment.js plus some other stuff (treeshaking?)
- Three things to deploy
- Primsa Server [Mysql]
- Yoga Server [node backend: Mutation & Query Resolvers]
- React App [node / next.js, frontend]
- set up prisma server first
- start at app.prisma.io (add server)
- takes you through steps and logging in to Heroku
- choose Postgres for DB
- once set up, then deploy prisma to heroku using deploy:heroku script
- start at app.prisma.io (add server)
- set up yoga server (this is our node backend)
- create and deploy to heroku (used heroku cli - see video #66)
- need to add .env values to heroku, via app settings
- deploy to now
- install npm now global
- use now cli to deploy (very simple, see now docs how to use a .env file)
- create and deploy to heroku (used heroku cli - see video #66)
- TROUBLESHOOTING
- ran in to a cors issue (between heroku front end and back end)
- make sure the FRONTEND_URL config setting does not have the '/' on the end
- ran in to a cors issue (between heroku front end and back end)
- Editor Setup and Starter Files Installation
- Sick Fits and the Tech Stack Behind It
- An Intro to Next.js, Tooling and Routing
- Custom _app.js Layout
- An Intro to Styled Components
- Themes and Layout with Styled Components
- Global Styling and Typography with Styled Components
- Visualizing Route Changes
- Fixing Styled Components Flicker on Server Render
- An intro to GraphQL
- Getting Setup with Prisma
- Getting our GraphQL Yoga Server Running
- Our first Query and Mutation
- Items Creation and Prisma Yoga Flow
- Setting Up Apollo Client with React
- React Meets GraphQL
- Creating Items with Mutations
- Uploading Images
- Updating Items with Queries and Mutations
- Deleting Items
- Displaying Single Items
- Pagination
- Pagination and Cache Invalidation
- User Signup and Permission Flow
- User Signup in React
- Currently Logged In User with Middleware and Render Props
- Sign in Form and Custom Error Handling
- Sign Out Button
- Backend Password Reset Flow
- Frontend Password Reset Flow
- Sending Email
- Data Relationships
- Creating a Gated Sign In Component
- Permissions Management
- Updating Permissions in Local State
- Updating Permissions on the Server
- Locking Down DeleteItem Permissions
- Creating our cart in React
- Apollo Local State Queries and Mutations
- Server Side Add To Cart
- Displaying Cart Items and Totals
- Removing Cart Items
- Optimistic Response && Cache Updates with Apollo
- Animating our Cart Count Component
- Dealing with Deleted Items in CartItems
- Cleaning Up This Render Prop Mess
- Search Dropdown Autocomplete
- Autocomplete with Downshift
- Credit Card Processing with Stripe Checkout
- Charging Cards on the Server Side
- Saving Orders to the Database
- Displaying Single Orders
- Orders Page
- Testing with Jest and Enzyme Introduction
- Unit Testing 101
- Mocking 101
- First Tests and Shallow Rendering
- Snapshot Testing
- Testing and Mocking Apollo Queries
- More Apollo Query Testing
- Testing Pagination
- Testing Mutations
- More Apollo Client Mutation Testing
- Testing our Cart
- Testing Order Components
- Deploying a Prisma Server to Heroku
- Deploying Yoga Server to Heroku or Now
- Deploying Frontend to Heroku and Now