GraphQL은 데이터를 얻는 효율적이고 유연하며 강력한 방법을 제공하기 때문에 최신 웹 애플리케이션에서 널리 사용되는 최신 API 쿼리 언어입니다
먼저 GraphQL 서버를 만들어야 합니다. graphql-yoga를 설치하고 간단한 GraphQL 스키마를 생성합니다.
npm init -y
npm install graphql yoga graphql-yoga
# server.js
const { GraphQLServer } = require('graphql-yoga');
const typeDefs = `
type Query {
hello: String
}
type Mutation {
addMessage(message: String!): String
}
`;
const resolvers = {
Query: {
hello: () => 'Hello world!',
},
Mutation: {
addMessage: (_, { message }) => `You added the message "${message}"`,
},
};
const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));
다음으로 GraphQL 서버와 통신할 수 있도록 프런트엔드 애플리케이션에서 Apollo 클라이언트를 구성해야 합니다.
npm install apollo-boost @apollo/client graphql
# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache(),
});
export default client;
이제 React 구성 요소에서 Apollo Client를 사용하여 쿼리와 변형을 수행합니다.
// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';
const GET_HELLO = gql`
query GetHello {
hello
}
`;
const ADD_MESSAGE_MUTATION = gql`
mutation AddMessage($message: String!) {
addMessage(message: $message)
}
`;
function App() {
const { loading, error, data } = useQuery(GET_HELLO);
const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<div>
<h1>{data.hello}</h1>
<button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
Add Message
</button>
{mutationData && <p>New message: {mutationData.addMessage}</p>}
</div>
);
}
export default App;
서버의 인사말을 가져와 페이지에 표시하기 위해 GET_HELLO 쿼리를 생성합니다. 동시에 사용자가 버튼을 클릭하면 서버에 새 메시지를 보내는 ADD_MESSAGE_MUTATION 변형 작업을 정의합니다.
백엔드 서버 시작:
node server.js
그런 다음 Create React App을 가정하고 프런트엔드 애플리케이션을 시작합니다.
npm start
GraphQL에서 쿼리와 변형은 JSON과 유사한 구조로 표현되는 문자열입니다. 다음은 간단한 예입니다.
# Query Example
query GetUser {
user(id: 1) {
name
email
}
}
# Mutation Example
mutation CreateUser {
createUser(name: "Alice", email: "alice@example.com") {
id
name
}
}
# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
newUser {
id
name
}
}
위 코드에서 GetUser 쿼리는 사용자 ID가 1인 사용자의 이름과 이메일을 요청합니다. CreateUser 변형은 새 사용자를 생성하고 새 사용자의 ID와 이름을 반환합니다. OnNewUser 구독은 새 사용자가 생성될 때까지 기다렸다가 새 사용자의 정보를 반환합니다.
백엔드에서는 다음 유형을 설명하기 위해 GraphQL 스키마를 정의합니다.
type User {
id: ID!
name: String!
email: String!
}
type Mutation {
createUser(name: String!, email: String!): User
}
type Subscription {
newUser: User
}
여기에서는 사용자 객체 유형, 변형 작업을 위한 Mutation 유형, 구독 작업을 위한 구독 유형을 정의합니다.
쿼리 구조는 필드와 매개변수로 구성됩니다. 위의 쿼리 예에서 user는 필드이고 id와 email은 user 필드의 하위 필드입니다. id: 1과 같은 매개변수는 쿼리를 사용자 정의하는 데 사용됩니다.
GraphQL 쿼리는 중첩될 수 있습니다. 다음은 더 복잡한 예입니다.
query GetUsersAndPosts {
users {
id
name
posts {
id
title
content
author {
id
name
}
}
}
}
이 쿼리는 모든 사용자와 해당 게시물을 요청하며, 여기에는 작성자에 대한 정보도 포함됩니다. 계층 구조를 사용하면 한 번의 요청으로 여러 수준의 데이터를 검색할 수 있습니다.
npm init -y
npm install graphql yoga graphql-yoga
# server.js
const { GraphQLServer } = require('graphql-yoga');
const typeDefs = `
type Query {
hello: String
}
type Mutation {
addMessage(message: String!): String
}
`;
const resolvers = {
Query: {
hello: () => 'Hello world!',
},
Mutation: {
addMessage: (_, { message }) => `You added the message "${message}"`,
},
};
const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));
이 React 구성 요소에서는 useQuery를 사용하여 GraphQL 서버에서 데이터를 가져오고 사용자와 게시물에 대한 정보를 렌더링합니다. 이것이 GraphQL 쿼리, 유형 시스템 및 계층 구조가 작동하는 방식입니다.
GraphQL 스키마 정의 언어(SDL)는 GraphQL 스키마를 설명하는 언어입니다. 간결하고 사람이 읽을 수 있는 형식으로 데이터 유형, 쿼리, 변형 및 지시문을 정의합니다.
유형 정의
먼저 몇 가지 기본 데이터 유형을 정의해 보겠습니다. 예를 들어 사용자 유형과 게시물 유형을 정의합니다.
npm install apollo-boost @apollo/client graphql
# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache(),
});
export default client;
여기서 사용자 유형에는 ID, 사용자 이름, 이메일 필드와 여러 게시물에 연결되는 게시물 필드가 있습니다. 게시물 유형에는 ID, 제목, 콘텐츠 필드 및 사용자를 가리키는 작성자 필드가 포함됩니다.
루트 및 변형 루트 쿼리
다음으로, 클라이언트가 데이터를 요청하고 데이터를 수정하는 진입점인 GraphQL 쿼리 루트(Query) 및 돌연변이 루트(Mutation) 유형을 정의합니다.
// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';
const GET_HELLO = gql`
query GetHello {
hello
}
`;
const ADD_MESSAGE_MUTATION = gql`
mutation AddMessage($message: String!) {
addMessage(message: $message)
}
`;
function App() {
const { loading, error, data } = useQuery(GET_HELLO);
const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<div>
<h1>{data.hello}</h1>
<button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
Add Message
</button>
{mutationData && <p>New message: {mutationData.addMessage}</p>}
</div>
);
}
export default App;
쿼리 유형에서는 단일 사용자, 전체 사용자, 단일 게시물, 모든 게시물을 가져오는 쿼리를 정의합니다. Mutation 유형에서는 신규 사용자 및 신규 게시물 생성을 위한 작업을 정의합니다.
지시어 이해 및 사용
지시문은 실행 동작을 변경하는 GraphQL 스키마의 명령입니다. 필드, 입력 유형, 객체 유형 등과 같은 유형 시스템 정의의 모든 부분에 적용될 수 있습니다. 다음은 사용자 정의 @auth 지시문을 사용하여 액세스 권한을 제어하는 방법을 보여줍니다.
먼저 특정 필드에 대한 액세스를 제한하고 사용자에게 로그인을 요구하는 @auth 지시어를 정의한다고 가정해 보겠습니다.
node server.js
다음으로 스키마에 이 지시문을 적용합니다.
npm start
위의 예에서 me query 및 username 필드는 특별한 권한 없이 접근할 수 있지만, 사용자의 이메일 필드에 접근하려면 관리자 권한(@auth(requires: ADMIN) 지시어로 지정)이 필요합니다.
GraphQL 커서 기반 페이지 매김을 사용하여 성능과 사용자 경험을 개선하세요.
스키마 정의:
# Query Example
query GetUser {
user(id: 1) {
name
email
}
}
# Mutation Example
mutation CreateUser {
createUser(name: "Alice", email: "alice@example.com") {
id
name
}
}
# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
newUser {
id
name
}
}
리졸버 예:
type User {
id: ID!
name: String!
email: String!
}
type Mutation {
createUser(name: String!, email: String!): User
}
type Subscription {
newUser: User
}
클라이언트의 오류 처리 능력을 향상하려면 오류 처리를 사용자 정의하세요.
리졸버 예:
query GetUsersAndPosts {
users {
id
name
posts {
id
title
content
author {
id
name
}
}
}
}
특정 비즈니스 논리 또는 보안 요구 사항을 구현하기 위한 사용자 정의 지시문을 만듭니다.
스키마 정의:
import { gql, useQuery } from '@apollo/client';
const GET_USERS_AND_POSTS = gql`
query GetUsersAndPosts {
users {
id
name
posts {
id
title
content
author {
id
name
}
}
}
}
`;
function App() {
const { loading, error, data } = useQuery(GET_USERS_AND_POSTS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :-(</p>;
return (
<div>
{data.users.map(user => (
<div key={user.id}>
<h2>{user.name}</h2>
<ul>
{user.posts.map(post => (
<li key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
<p>Author: {post.author.name}</p>
</li>
))}
</ul>
</div>
))}
</div>
);
}
export default App;
리졸버 예:
type User {
id: ID!
username: String!
email: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String!
author: User!
}
GraphQL 서버 구성에 이 지시어 핸들러를 등록하세요.
페더레이션을 사용하면 여러 서비스로 구성된 단일 GraphQL API를 구축할 수 있습니다.
서비스 A 스키마:
npm init -y
npm install graphql yoga graphql-yoga
# server.js
const { GraphQLServer } = require('graphql-yoga');
const typeDefs = `
type Query {
hello: String
}
type Mutation {
addMessage(message: String!): String
}
`;
const resolvers = {
Query: {
hello: () => 'Hello world!',
},
Mutation: {
addMessage: (_, { message }) => `You added the message "${message}"`,
},
};
const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));
서비스 B 스키마:
npm install apollo-boost @apollo/client graphql
# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000/graphql',
cache: new InMemoryCache(),
});
export default client;
GraphQL의 필드 확인자와 데이터 로더를 사용하여 성능을 최적화하세요.
데이터 로더 예:
// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';
const GET_HELLO = gql`
query GetHello {
hello
}
`;
const ADD_MESSAGE_MUTATION = gql`
mutation AddMessage($message: String!) {
addMessage(message: $message)
}
`;
function App() {
const { loading, error, data } = useQuery(GET_HELLO);
const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<div>
<h1>{data.hello}</h1>
<button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
Add Message
</button>
{mutationData && <p>New message: {mutationData.addMessage}</p>}
</div>
);
}
export default App;
위 내용은 최신 웹 애플리케이션에서 GraphQL의 애플리케이션 및 장점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
