찾다

집 >웹 프론트엔드 >JS 튜토리얼 >최신 웹 애플리케이션에서 GraphQL의 애플리케이션 및 장점

최신 웹 애플리케이션에서 GraphQL의 애플리케이션 및 장점

DDD
DDD원래의
2024-12-23 18:58:21646검색

Applications and Advantages of GraphQL in Modern Web Applications

GraphQL은 데이터를 얻는 효율적이고 유연하며 강력한 방법을 제공하기 때문에 최신 웹 애플리케이션에서 널리 사용되는 최신 API 쿼리 언어입니다

GraphQL 기본 빠른 애플리케이션 예:

1. 백엔드 설정(graphql-yoga 사용)

먼저 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`));

2. 프런트엔드 설정(Apollo Client 사용)

다음으로 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;

3. 프런트엔드 구성요소 작성

이제 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 변형 작업을 정의합니다.

4. 애플리케이션 실행

백엔드 서버 시작:

node server.js

그런 다음 Create React App을 가정하고 프런트엔드 애플리케이션을 시작합니다.

npm start

GraphQL 기본 쿼리

1. 쿼리 언어: 쿼리, 돌연변이, 구독

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 구독은 새 사용자가 생성될 때까지 기다렸다가 새 사용자의 정보를 반환합니다.

2. 유형 시스템

백엔드에서는 다음 유형을 설명하기 위해 GraphQL 스키마를 정의합니다.

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

여기에서는 사용자 객체 유형, 변형 작업을 위한 Mutation 유형, 구독 작업을 위한 구독 유형을 정의합니다.

3. 쿼리 구조: 필드 및 매개변수

쿼리 구조는 필드와 매개변수로 구성됩니다. 위의 쿼리 예에서 user는 필드이고 id와 email은 user 필드의 하위 필드입니다. id: 1과 같은 매개변수는 쿼리를 사용자 정의하는 데 사용됩니다.

4. 계층 구조 및 중첩

GraphQL 쿼리는 중첩될 수 있습니다. 다음은 더 복잡한 예입니다.

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

이 쿼리는 모든 사용자와 해당 게시물을 요청하며, 여기에는 작성자에 대한 정보도 포함됩니다. 계층 구조를 사용하면 한 번의 요청으로 여러 수준의 데이터를 검색할 수 있습니다.

클라이언트 코드 예(Apollo 클라이언트 사용) 

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 스키마

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 고급 애플리케이션

1. 페이지 매김

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
}

2. 오류 처리

클라이언트의 오류 처리 능력을 향상하려면 오류 처리를 사용자 정의하세요.

리졸버 예:

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

3. 사용자 정의 지시어

특정 비즈니스 논리 또는 보안 요구 사항을 구현하기 위한 사용자 정의 지시문을 만듭니다.

스키마 정의:

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 서버 구성에 이 지시어 핸들러를 등록하세요.

4. 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;

5. 복잡한 쿼리 최적화

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 기능 및 장점

  • 성능 최적화: 요청 시 데이터를 획득하여 네트워크 전송 오버헤드가 줄어들고 페이지 로딩 속도가 향상됩니다.
  • 오류 감소: 클라이언트가 쿼리 구조를 정의하고 서버가 예상한 형태를 반환하므로 인터페이스 불일치로 인한 오류가 줄어듭니다.
  • 더 나은 API 디자인: 강력한 유형 시스템은 데이터의 일관성과 정확성을 보장하므로 API를 더 쉽게 이해하고 유지 관리할 수 있습니다.
  • 클라이언트 제어: 클라이언트는 얻을 데이터의 양과 시기를 결정할 수 있어 사용자 경험이 향상됩니다.
  • 캐시 최적화: 클라이언트는 반환된 데이터 구조를 기반으로 캐싱 전략을 보다 쉽게 ​​구현할 수 있습니다.
  • 백엔드 복잡성 감소: 백엔드는 더 이상 다양한 클라이언트의 요구 사항을 충족하기 위해 여러 API 엔드포인트를 생성할 필요가 없습니다.

위 내용은 최신 웹 애플리케이션에서 GraphQL의 애플리케이션 및 장점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

graphql json Object define for format include require Error register restrict using Interface this display input Access
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript를 사용하여 여러 브라우저에 붙여넣을 때 클립보드 데이터를 검색하려면 어떻게 해야 합니까?다음 기사：JavaScript를 사용하여 여러 브라우저에 붙여넣을 때 클립보드 데이터를 검색하려면 어떻게 해야 합니까?

관련 기사

더보기