mongodb, graphql 및 typescript를 사용하여 nodejs express-server에 대한 초보자 친화적 가이드

이 가이드에서는 지난 6개월 동안 땜질을 하고 있는 초보자의 관점에서 노드의 서버 프로트를 설정하는 방법을 안내하고 프로세스에서 발생한 일반적인 문제를 피하는 데 도움을 줄 것입니다.

나는 당신이 javascript, typescript 및 graphql의 기본을 알고 있다고 가정합니다.

하지만 가장 기본적인 것부터 github 커밋을 구성하려고 합니다.

TypeScript 설정이 약간 번거로울 수 있으므로 이 튜토리얼을 시작하기 전에 먼저 저장소를 복제하는 것이 좋습니다.

git이 설치되어 있는 경우 초기 커밋으로 이동하고 리포지토리를 다운로드하거나 복제합니다.

Repo

또한 장치에 mongodb를 설치 및 설정하거나 mongo atlas를 사용해야 합니다. 나는 어두운 모드가 없기 때문에 mongodb 나침반의 팬이 아니므로 vscode 확장 MySQL 데이터베이스 뷰어를 사용합니다.
https://marketplace.visualstudio.com/items?itemName=cweijan.vsc
sql 및 nosql 데이터베이스 설치 및 연결



다음을 위한 vscode 확장을 사용할 수도 있습니다.

Graphql과 타이프스크립트

루트 디렉토리에서 "npm install"실행

그런 다음 npm은 watch 또는 yarn watch를 실행하여 ts 변경 사항을 확인합니다.

다른 터미널을 열어 npm start 또는 yarn start를 실행합니다.

import  express  from "express";
import cors from 'cors'
import { ApolloServer } from 'apollo-server-express';
import { gql } from 'apollo-server-express';

const PORT=4000;

const typeDefs = 
gql`
    type Query {
      defaultPost:String
     }
`;
const resolvers = {
  Query: {
    defaultPost: () => "eat your vegetables",
  },
};

const startServer=async()=>
{
const app = express();


const allowedOrigins = [
'http://localhost:3000',
'http://localhost:3001',
'https://studio.apollographql.com'
];
const corsOptions = {
credentials: true,
  origin: function(origin, callback){
   if(!origin) return callback(null, true);
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'The CORS policy for this site does not ' +
                'allow access from the specified Origin.';
      return callback(new Error(msg), false);
    }
    return callback(null, true);
  }
}
app.use(cors(corsOptions))
//rest routes
app.get("/", (req, res) => {
res.json({
    data: "API is working...",
  });
});

const server = new ApolloServer({
  typeDefs,
  resolvers,
});
await server.start();

server.applyMiddleware({ app });

app.listen(PORT, () => {
  console.log(` Server is running at http://localhost:${PORT}`);
});
}
startServer().catch(e=>console.log("error strting server======== ",e))

이제 서버가 준비되었습니다.http://localhost:4000/graphql
Apollo의 놀이터에서 서버를 미리 보고 첫 번째 쿼리를 실행합니다.



오른쪽에는 더하기 버튼을 클릭하고 필드를 추가하여 탐색할 수 있는 모든 작업이 있습니다. 그런 다음 실행하면 응답이 왼쪽에 표시됩니다.

이제 프로젝트에 mongodb를 추가합니다.

var uri = "mongodb://localhost:27017/testmongo";

//@ts-ignore
mongoose.connect(uri, { useUnifiedTopology: true, useNewUrlParser: true })
.then(()=>console.log("connected to newmango db"))

이렇게 하면 newmango 컬렉션이 자동으로 생성됩니다.
이제 우리는 새로운 디렉토리 models/TestModel.ts를 만들 것입니다.

그런 다음 이 코드를 추가하여 새 mongo db 모델을 만듭니다.

import mongoose from "mongoose";
const Schema = mongoose.Schema;

const TestSchema = new Schema({
  title: {
    type: String,
    required: true
  },
  desc: {
    type: String,
    required: true
  },

},
//add this for auto createdAt and updatedat fields
{timestamps:true}
);

export const TestModel= mongoose.model("Test", TestSchema);

그런 다음 resolver/TestResolver.ts 및 typeDefs/typeDef.ts도 생성합니다.

import { TestModel } from "./../model/TestModel";
export const resolvers = {
  Query: {
    defaultPost: () => "eat your vegetables",
    getItems: async () => {
      const chats = await TestModel.find({});
      console.log("holt output ======", chats);
      return chats;
    },
  },
  Mutation: {
    //shape of params (parent,args, context, info)
    addItem: async (parent, { title, desc }, context, info) => {
   let item={}
   let error={}     
   try{
      const newItem = await new TestModel({
        title,
        desc,
      });
   item=await newItem.save()
    console.log("item  ==== ",item)

    }catch(e){
    console.log("addTest error response =====", e.message);
    error=e
           }

         return {
            item:item,
            error:{
           //@ts-ignore
            message:error.message
            }
          };



 },
  },
};

import { gql } from 'apollo-server-express';

export const typeDefs = 
gql`type Item{
    title:String,
    desc:String
   }
   type Error{
   message:String
   }
   type ItemResponse{
    item:Item
    error:Error
   }
    type Query {
      defaultPost:String,
      getItems:[Item]
     },

     type Mutation{
      addItem(title:String,desc:String):ItemResponse
     }


`;

해당 코드를 추가하고 index.ts에서 가져옵니다.

import  express  from "express";
import cors from 'cors'
import { ApolloServer } from 'apollo-server-express';
import mongoose  from 'mongoose';
import { resolvers } from './resolvers/TestResolver';
import { typeDefs } from './typeDefs/typedefs';

const PORT=4000;

const startServer=async()=>
{
const app = express();


const allowedOrigins = [
'http://localhost:3000',
'http://localhost:3001',
'https://studio.apollographql.com'
];
const corsOptions = {
credentials: true,
  origin: function(origin, callback){
   if(!origin) return callback(null, true);
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'The CORS policy for this site does not ' +
                'allow access from the specified Origin.';
      return callback(new Error(msg), false);
    }
    return callback(null, true);
  }
}
app.use(cors(corsOptions))
var uri = "mongodb://localhost:27017/testmongo";

//@ts-ignore
mongoose.connect(uri, { useUnifiedTopology: true, useNewUrlParser: true })
.then(()=>console.log("connected to newmango db"))

//rest routes
app.get("/", (req, res) => {
res.json({
    data: "API is working...",
  });
});


const server = new ApolloServer({
  typeDefs,
  resolvers,
});
await server.start();

server.applyMiddleware({ app });

app.listen(PORT, () => {
  console.log(` Server is running at http://localhost:${PORT}`);
});
}
startServer().catch(e=>console.log("error strting server======== ",e))

해당 코드를 추가하고 index.ts에서 가져옵니다.

typedef는 데이터의 모양과 모든 유형을 정의합니다.

예를 들어 우리는 Strung 유형의 title 필드와 String 유형의 desc 필드가 있는 객체인 사용자 정의 유형 Item을 가지고 있습니다.

또한 쿼리, 변형 및 구독을 정의해야 합니다.

이러한 정의는 리졸버에 전달하고 리졸버에서 수신할 데이터를 형성하는 데 사용됩니다.

리졸버는 mongo db에서 항목 배열을 반환하는 간단한 getItems 쿼리로 구성됩니다.





addItem 변이는 제목과 설명을 가져와 mongo에 저장한 다음 항목 응답을 반환합니다.





더 복잡한 변형 및 쿼리에 대한 자세한 정보가 있습니다.

하지만 내 코드가 여전히//@ts-ignore 데코레이터로 가득 차 있다는 것을 눈치채셨다면
우리는 타이프스크립트를 최대한 사용하지 않기 때문에
다음 번에는 더 나은 유형 검사를 위해 type-graphql 및 typegoose를 설정하여 개발을 훨씬 쉽게 만듭니다.

mongodb에서 삭제 및 업데이트도 처리합니다.
그때까지 더 많은 것을 탐색하십시오.