Full Stack React — Часть 6 (React, GraphQL, Express, MongoDB)

Эпизод 6: Создание преобразователей заметок (клон Evernote)

В предыдущем эпизоде мы создали нашу схему MongoDB и установили между ними ссылки, а также обновили нашу схему GraphQL. Если пропустили, то можете найти здесь → Часть 5

В этом эпизоде мы работаем над созданием нашего распознавателя заметок, никаких фиктивных данных или лол, на этот раз мы будем общаться с БД и хранить эту информацию.

Повестка дня:

Запустить сервер
Организуйте файлы
CRD (CRUD) операции с распознавателем заметок
Тестовые запросы

Запустить сервер

ШАГ 1. Перейдите в папку проекта и запустите сервер yarn start или npm run start.

ШАГ 2: Убедитесь, что при запуске сервера вы все еще подключены к mongoDB. Уверен, вам нужно войти на сайт mongoDB

Если вы все еще не видите connected to mongodb при запуске сервера, откройте другую вкладку в своем терминале и запустите mongo, чтобы запустить сервер mongoDB. Однако я считаю, что вам больше не нужно запускать сервер mongoDB, а просто войти на сайт. (изображение выше).

Организуйте файлы

В настоящее время у нас есть фиктивные распознаватели в файле schema.js, я хочу, чтобы вы удалили его ВСЕ, потому что мы собираемся начать с распознавателей с нуля. На данный момент в файле schema.js не должно быть распознавателей.

ШАГ 1: Создайте папку resolvers в корне нашего проекта (evernoteclone)

ШАГ 2: В папке распознавателей создайте файл index.js, файл users.js и файл notes.js. Пользователи и заметки — это то, где мы будем хранить наши преобразователи с этого момента. Это должно выглядеть так

|--resolvers
  |--index.js
  |--user.js
     // user resolvers
  |--notes.js
    // note resolvers

ШАГ 3: Внутри файла index.js скопируйте это, чтобы экспортировать все ваши преобразователи и объединить их в один основной преобразователь для использования в вашем файле server.js.

const notesResolver = require('./notes')
const usersResolver = require('./users')
const allResolvers = {
  ...usersResolver,
  ...notesResolver
}
module.exports = allResolvers

ШАГ 4: В вашем файле server.js потребуйте их и используйте как rootValue и удалите другой преобразователь, который у вас был раньше

const allResolvers = require("./resolvers/index");
app.use( "/graphql",
  graphqlHTTP({
  schema: ourSchema,
  rootValue: allResolvers,
  graphiql: true
})
);

Преобразователи примечаний (CRD) Создать, прочитать, удалить

ШАГ 1. Перейдите к файлу преобразователя заметок.

ШАГ 2: В верхней части файла укажите модель Note, которая нам нужна.

const Note = require('../models/notes')

ШАГ 3: После того, как вам потребуется модель Note, создайте файл module.exports. Здесь мы будем хранить все наши преобразователи заметок.

module.exports = {
// Create note and save in DB
 createNote: async ({noteInput})=> {
   const note = new Note({
     title: noteInput.title,
     content: noteInput.content,
     image: noteInput.image
   }
   let notes;
   try {
     const result = await note.save()
     notes = {
       ...result._doc
      }
     return notes
     }catch (err){
      throw err
     }
  },
 // Read notes in DB
notes: async () =>{
  try {
    const Notes = await Note.find({})return Notes.map(note =>{
    return {...note._doc}
    })
  }catch(err){
    throw err
  }
 },
// Read single note by id
note: async ({_id}) =>{
  try{
    const findNote = await Note.findById(_id)
    return {
      ...findNote._doc
    }
   }catch(err){
      throw err
   }
 },
// Delete note by id
deleteNote: async({_id}) =>}
try {
  const note = await Note.findByIdAndRemove({_id: _id})
  return {...note._doc}
 }catch(err){
    throw err
  }
 }
}

Я знаю, вы, вероятно, думаете: эй, подождите, что только что произошло? Позвольте мне объяснить, что делает каждый из них.

Преобразователь Создать заметку создает заметку с использованием нашей модели, сохраняет эту заметку (и сохраняет ее в переменной результата), а затем возвращает этот документ внутри объекта с помощью оператора распространения. Единственный способ получить документ заметки — добавить result._doc . Помните, что это фактически сохраняет нашу заметку внутри БД. {...result._doc}
Преобразователь заметок для чтения (notes) Мы создали переменную заметок и сохранили все заметки, которые мы нашли в БД, используя нашу модель заметок, затем мы сопоставляем их и возвращаем эти документы в объект {...notes._doc}.
В преобразователе одной заметки( note ) мы уничтожили параметры, чтобы получить идентификатор, который мы передали из нашей схемы graphql, мы ищем в БД заметку с тем же идентификатором, что и заметка, которую мы передали в качестве параметров. и вернул единственную заметку в объекте {...findNote._doc} .
Преобразователь заметок для удаления ( deleteNote ) Мы снова уничтожили параметры для идентификатора, затем мы искали в БД заметку с тем же идентификатором, который мы передали в параметрах. Но на этот раз мы вернули заметку, которая была удалена, поэтому мы точно знаем, что она была удалена. {...note._doc} .

Теперь, когда мы закончили все наши преобразователи заметок, мы можем начать тестирование этих запросов в GraphiQL.

Тестовые запросы

Перейдите на свой localhost:5000/graphql и создайте заметку, удалите заметку, найдите заметку, перечислите заметки.

Если все прошло хорошо, вы должны увидеть только что созданную заметку, и она должна быть сохранена в вашей базе данных mongoDB. Я советую запустить эти же запросы, чтобы проверить другие, чтобы убедиться, что все работает правильно :)

Ну, это все для этого эпизода. Надеюсь, вам понравилось, дальше будет больше :)

Вот версия видео, если интересно → Создание преобразователей заметок