Skip to content

Latest commit

 

History

History
63 lines (59 loc) · 3.9 KB

README.md

File metadata and controls

63 lines (59 loc) · 3.9 KB

What is this?

  • you want to quickly spin up a new nextjs app that has an api layer with graphql, sequelize, and mssql

How do I use this

  • clone this repo
  • you'll need [email protected] installed
  • from the parent directory, run bash sequelize-graphql-next-template/main.sh

What main.sh does

  • create a new app with nextjs
    • npx create-next-app [app name]
  • set up env variables
    • copy the .env.template from this repo into your nextjs app
    • cp .env.template ../[app name]/.env
    • provide the values to those env variables, you'll find them from your mssql database
    • you'll also want to copy that .env.template into another .env.template file in your new app so that other contributors will know what they need to set up
    • git ignore the .env file
  • install the dependencies that are in this package.json
  • set up sequelize:
    • cp db.config.js ../[your app]
    • cp .sequelizeerc ../[your app]
    • npx sequelize init
    • cp ./db/config/config.js ../[your app]/db/config/config.js
      • you'll probably want to modify this file for your other environments when you start deploying
    • `cp ./db/models/index.js ../[your app]/db/models/index.js
  • set up graphql
    • cp ./graphql -R ../[your app]/graphql
    • cp ./pages/api/graphql.js ../[your app]/pages/api
    • cp ./pages/api/rest.js ../[your app]/pages/api
    • cp ./pages/_app.js ../[your app]/pages/_app.js
  • run the app and check the state of things
    • npm run dev,
      • open browser to localhost:3000, you should see the nextjs sample page
      • navigate to /api/rest, you should see some dummy json content
      • navigate to /api/graphql, you should see the apollographql studio with a dummy query and dummy mutation

Building your app, api driven first

  • generate a model with sequelize
    • example: npx sequelize model:create --name User --attributes firstName:stringlastName:string,email:string
      • name field is the name of the table
      • attributes isn't required, but you can specify the columns and their types
      • after you've generated you're table, make any changes in the db/models/[tablename].js, explore ways to modify the table's columns
    • add associations
    • the cli script that created the model also created a migration that adds the table to the database
    • this creates a file with a time stamp and the name of the migration in the db/migrations directory
    • npx sequelize db:migrate
  • generate a seed for your model
    • npx sequelize seed:generate --name users
    • find the seed file and fill it out with some data
    • npx sequelize db:seed:all
    • modify /api/test.js so that it calls db.user.findAll() and returns the results to the page and check /api/rest, and you should see your seed data
  • graphql
    • first define your User type in graphql/schema/index.js and add it to the Query type
    • then define your mutations
      • create a file that matches the name of your model in graphql/resolvers, in our case, it would be user.js. You should export an object that has a queries field and a mutations field. Each of those two fields should contain an object with a set of async functions that invoke methods from sequelize. Remember the graphql resolver arguments, you can access the sequelize methods from context[model name], and your model names will match the filel name in db/models/*.js
      • now in /graphql/resolvers/index.js, import your resolvers, and spread each set of resolver functions into their approapriate slot
      • last, be sure to add the mutations and queryies to graphql/schema/index.js
      • now check localhost:3000/api/graphql and you should be able to run your queries and mutations
  • from there, you can start creating your views with react
  • to use your graphql endpoint, take a look at @apollo/client

additional links