GraphQL은 API에 대한 쿼리 언어이며 기존 데이터로 쿼리를 수행하기 위한 런타임입니다.
서버에서 데이터를 요청하고 요청한 내용만 가져 오는 간단한 인터페이스를 제공합니다.
반대로 서버에 REST API를 사용하는 경우 리턴되는 내용을 제어 할 수 없습니다.
https://codesource.io/build-a-crud-application-with-react-and-apollo-graphql/
예를 봅시다. 앱이 서버에서 사용자의 세부 정보를 가져와야 한다고 가정 해 보겠습니다. REST를 사용하면 응답이 다음과 같이 보일 수 있습니다.
{
user_details: {
id: 6678,
name: “John Doe”,
email: “johndoe@example.com”
}
}GraphQL을 사용하면 원하는 데이터를 정확하게 요청할 수 있으며 요청한 것만 얻을 수 있습니다. 필요한 것이 사용자의 이름이라고 가정하면 응답은 다음과 같습니다.
{
user_details: {
name: “John Doe”
}
}이 외에도 REST는 달성 할 기능에 따라 다양한 엔드 포인트를 제공합니다.
GraphQL을 사용하면 데이터를 조작하기 위해 쿼리와 변이를 보내는 엔드 포인트 하나만 얻을 수 있습니다.
다음 단락에서 이에 대해 다룰 것입니다. 시작하자.
전제 조건
이 자습서에서는 백엔드 서버를 제공하는 서버와 React Crud 응용 프로그램을 제공하는 서버를 2 대 운영합니다. 먼저 백엔드부터 시작하겠습니다.
우리가 만들 Crud 앱을 살펴보십시오.
https://codesource.io/wp-content/uploads/2020/01/demo-of-reat-grahql-appp.mp4
아폴로 서버 설정
GraphQL은 클라이언트와 서버가 데이터를 조작하기 위해 상호 작용하는 방법을 설명하는 사양입니다.
따라서 이 사양을 기반으로 하는 다양한 언어에 대해 서로 다른 구현이 있습니다.
튜토리얼에서 사용할 것은 Apollo GraphQL입니다. 이점 중 하나는 Java, JavaScript 및 Swift에 대한 구현이 있어 많은 변경 없이 다른 클라이언트에서 사용할 수 있다는 것입니다.
또한 시작하는 것이 비교적 간단합니다.
터미널에서 새 디렉토리를 작성하고 필요한 패키지를 설치하십시오.
mkdir todo-graphql && cd todo-graphql이 디렉토리 안에 다른 폴더를 작성하십시오.
mkdir server서버에는 GraphQL 서버가 포함됩니다. 터미널의 서버 폴더로 전환하고 다음을 설치하십시오.
cd server
npm install --save express apollo-server-express corsserver.js라는 루트 디렉토리에 파일을 작성하고 다음을 추가하십시오.
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const cors = require('cors');
let todos = [
{
id: 0,
text: 'Hello from GraphQL',
completed: false,
},
];이전 단계에서 설치된 패키지를 가져옵니다. 다른 출처에서 요청을 할 수 있기를 원하므로 cors 패키지를 사용합니다.
우리가 만들 응용 프로그램은 할 일과 완료 여부를 추적하는 할 일 목록 응용 프로그램입니다. 할 일을 배열에 저장하지만 배열을 데이터베이스 나 파일로 대체 할 수 있습니다. 간단하게 하기 위해 배열을 사용합니다.
각 할일에는 ID, 텍스트 및 완료가 있습니다. 여태까지는 그런대로 잘됐다.
할 일 후에 다음을 추가하십시오.
const typeDefs = gql`
type Todo {
id: String
text: String
completed: Boolean
}
type Query {
todos: [Todo]!
}
type Mutation {
createTodo(text: String!):String
removeTodo(id: String!):String
}
`;먼저 Todo라는 스키마를 정의합니다. 기본적으로 Todo의 모델입니다. 다음으로 쿼리를 정의합니다. 앞에서 정의한 Todo 배열을 포함하는 쿼리 할 일이 하나뿐입니다. 끝에 있는 (!)는 항상 무언가를 반환한다는 것을 나타냅니다.
쿼리를 GraphQL 서버에서 데이터를 가져 오는 방식으로 생각할 수 있습니다. REST의 GET 요청과 같습니다. 이 쿼리는 클라이언트 앱을 채우는 데 사용될 서버에서 할 일을 가져옵니다.
또한 2 개의 변이를 정의합니다. 변이는 서버에서 데이터를 업데이트하는 방법입니다. 우리가 가진 첫 번째 변이는 createTodo입니다. 하나의 매개 변수 텍스트를 허용하며 이는 문자열이어야 합니다. 그런 다음 완료되면 문자열을 반환합니다. removeTodo도 마찬가지입니다.
이 타입 정의는 gql ''헬퍼 함수를 사용하여 생성되었습니다.
다음으로 리졸버를 추가합니다.
const resolvers = {
Query: {
todos: () => todos,
},
Mutation: {
createTodo: (parent, args, context, info) => {
return todos.push({
id: Date.now().toString(),
text: args.text,
completed: false,
});
},
removeTodo: (parent, args, context, info) => {
for (let i in todos) {
if (todos[i].id === args.id) {
todos.splice(i, 1);
}
}
return args.id;
}
}
};리졸버는 쿼리와 돌연변이가 발생할 때 실행되는 함수입니다. 여기에서 고객에게 반환 되는 데이터를 가져오고 조작 할 수 있습니다. 할 일 쿼리가 할 일 배열을 반환했습니다. 돌연변이는 4 개의 인수를 받지만 특히 클라이언트에서 전달 된 데이터를 포함하는 인수에 관심이 있습니다. 이 데이터를 사용하여 할 일의 배열을 조작하고 결과를 반환합니다.
const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
server.applyMiddleware({ app });
app.use(cors());
app.listen({ port: 4000 }, () =>
console.log('Now browse to http://localhost:4000' + server.graphqlPath)
);마지막으로 타입 정의와 리졸버를 전달하여 ApolloServer를 만듭니다. 또한 교차 출처 요청을 허용하기 위해 cors()를 사용해야 합니다. 그런 다음 포트 4000에서 앱을 제공합니다.
파일을 변경할 때 서버에 변경 사항이 반영되도록 하기 위해 다른 패키지를 설치합니다.
npm install --save nodemon그런 다음 package.json의 scripts 섹션에 다음을 추가하십시오.
"scripts": {
"start": "nodemon server.js"
}터미널에서 npm start를 실행하십시오.
모든 것이 올바르게 설정 되었으면 이제 터미널에서 http : // localhost : 4000 / graphql을 찾습니다.가 표시됩니다. 이 링크는 클라이언트 앱에서 모든 쿼리와 변이를 보내는 곳입니다.
해당 URL로 이동하면 클라이언트 앱에 통합하기 전에 쿼리 및 변형 테스트를 실행할 수 있는 대화식 셸이 제공됩니다.
등록된 댓글이 없습니다.
