Apollo GraphQl 작업

23379 단어 graphql javascript webdev beginners

GraphQL은 단일 엔드포인트에서 작동하는 쿼리 언어이자 도구 세트입니다. 여러 끝점을 노출하는 REST API와 다릅니다.

RestApi보다 GraphQl을 사용하면 많은 이점이 있습니다.
GraphQL의 많은 이점 중 하나는 단일 요청에서 정확하고 구체적인 데이터만 반환하여 과도하게 가져오거나 적게 가져오는 문제를 제거한다는 것입니다.

이 블로그는 이 쿼리 언어로 간단한 애완 동물 응용 프로그램을 만드는 방법을 보여줍니다.

다이빙하자

프로젝트 설정

새 프로젝트 파일을 만들고 그 안에 cd합니다. 노드를 생성하는 Initiatenpm init 명령입니다. js 프로젝트.

npm init && npm install graphql uuid apollo-server && touch index.js

우리는 데이터베이스에 연결하지 않을 것입니다. 대신 모의 데이터베이스를 사용합니다.
index.js에서 이전에 설치된 패키지를 가져옵니다.

const { ApolloServer, gql } = require('apollo-server'); 
const { v4: uuidv4 } = require('uuid');

⏭️ 그 다음에는 Type definition를 생성합니다.

// Defining the types of the data that will be used in the application. 
const defTypes = `
    type Pet{
    id: ID! # ! means Can't return null
    name:String,
    age: Int
    }

    type Query{ // Query is a reserved word in GraphQL
        pets: [Pet]
        pet(id:ID!):Pet!
    }

    type Mutation{
      addPet(name: String!, age: Int!): Pet!
      updatePet(id: ID!, name: String!, age: Int!): Pet!
      deletePet(id: ID!): Pet!
    }
`;

GraphQL 서버는 스키마를 사용하여 사용 가능한 데이터의 모양을 설명합니다. 이 스키마는 백엔드 데이터 저장소에서 채워진 필드가 있는 유형의 계층 구조를 정의합니다.
query 유형은 데이터 검색 작업에 사용되는 반면 mutation 유형은 데이터 생성 또는 수정 작업에 사용됩니다.

⏭️ 다음으로 객체 배열이 될 더미 데이터를 만들어 보겠습니다.


const Pet = [
  {
    id: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
    name: 'Dog',
    age: 2,
  },
  {
    id: '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',
    name: 'Cat',
    age: 3,
  },
];

⏭️ 다음으로 리졸버를 생성합니다.

// Create Resolvers
const resolvers = {
  Query: {
    pets: () => Pet,
    //query a single pet
    pet: (parent, args) => {
      return Pet.find((pet) => pet.id === args.id);
    },
  },
  Mutation: {
    addPet: (parent, args) => {
      const pet = { id: uuidv4(), name: args.name, age: args.age };
      Pet.push(pet);
      return pet;
    },
    deletePet: (parent, args) => {
      const pet = Pet.find((pet) => pet.id === args.id);
      Pet = Pet.filter((pet) => pet.id !== args.id);
      return pet;
    },

    updatePet: (parent, args) => {
      const pet = Pet.find((pet) => pet.id === args.id);
      pet.name = args.name;
      pet.age = args.age;
      return pet;
    },
  },
};

A resolver is a function that's responsible for populating the data for a single field in your schema.

다음으로 Apollo 서버를 만듭니다.

// Create Apollo Server
const server = new ApolloServer({
  typeDefs: gql(defTypes),
  resolvers,
});

⏭️ 마지막으로 서버를 시작합니다

const port = process.env.PORT || 4001;

// Start Server
server.listen(port).then(({ url }) => {
  console.log(`Server started at ${url}`);
});

index.js 파일은 다음과 같아야 합니다.


const { ApolloServer, gql } = require('apollo-server');
const { v4: uuidv4 } = require('uuid');

const defTypes = `
    type Pet{
    id: ID! 
    name:String,
    age: Int
    }

    type Query{
        pets: [Pet]
        pet(id:ID!):Pet!
    }

    type Mutation{
      addPet(name: String!, age: Int!): Pet!

      updatePet(id: ID!, name: String!, age: Int!): Pet!

      deletePet(id: ID!): Pet!
    }
`;

// Create Dummy Data

const Pet = [
  {
    id: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
    name: 'Dog',
    age: 2,
  },
  {
    id: '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',
    name: 'Cat',
    age: 3,
  },
];

// Create Resolvers
const resolvers = {
  Query: {
    pets: () => Pet,
    //query a single pet
    pet: (parent, args) => {
      return Pet.find((pet) => pet.id === args.id);
    },
  },
  Mutation: {
    addPet: (parent, args) => {
      const pet = { id: uuidv4(), name: args.name, age: args.age };
      Pet.push(pet);
      return pet;
    },
    deletePet: (parent, args) => {
      const pet = Pet.find((pet) => pet.id === args.id);
      Pet = Pet.filter((pet) => pet.id !== args.id);
      return pet;
    },

    updatePet: (parent, args) => {
      const pet = Pet.find((pet) => pet.id === args.id);
      pet.name = args.name;
      pet.age = args.age;
      return pet;
    },
  },
};

// Create Apollo Server
const server = new ApolloServer({
  typeDefs: gql(defTypes),
  resolvers,
});

const port = process.env.PORT || 4001;

// Start Server
server.listen(port).then(({ url }) => {
  console.log(`🏹🏹🏹Server started at ${url}`);
});