데이터 검색 기능은 웹 애플리케이션에서 매우 중요합니다. GraphQL과 타입스크립트를 함께 사용하여 데이터 검색을 구현하고 싶다면, 매개변수를 활용하여 유연하고 정확하게 검색할 수 있는 방법에 대해 알아보겠습니다.

1. GraphQL 스키마에 검색 매개변수 추가하기

먼저, GraphQL 스키마에 데이터 검색을 위한 매개변수를 추가해야 합니다. 예를 들어, 사용자를 검색하는 기능을 구현한다고 가정해보겠습니다.

type Query {
  searchUsers(name: String, email: String, role: UserRole): [User]
}

enum UserRole {
  ADMIN
  USER
}

위의 예제에서는 searchUsers 쿼리에 name, email, role 매개변수를 추가했습니다.

2. 타입스크립트로 쿼리 및 매개변수 정의하기

이제 타입스크립트에서 해당 쿼리와 매개변수를 정의해야 합니다.

import { gql } from 'graphql-tag';

const SEARCH_USERS = gql`
  query SearchUsers($name: String, $email: String, $role: UserRole) {
    searchUsers(name: $name, email: $email, role: $role) {
      id
      name
      email
      role
    }
  }
`;

위의 예제에서는 SEARCH_USERS 쿼리를 정의하고, 각 매개변수의 타입을 지정했습니다.

3. 검색 매개변수를 활용하여 쿼리 실행하기

마지막으로, 실제로 검색 매개변수를 활용하여 쿼리를 실행할 수 있습니다.

import { useQuery } from '@apollo/client';

const { data, loading, error } = useQuery(SEARCH_USERS, {
  variables: {
    name: 'John Doe',
    email: 'john@example.com',
    role: 'ADMIN'
  }
});

위의 예제에서는 useQuery 훅을 사용하여 SEARCH_USERS 쿼리를 실행하고, 검색 매개변수를 전달했습니다.

이제 타입스크립트와 GraphQL을 함께 사용하여 데이터 검색을 구현하는 방법에 대해 알아보았습니다. 검색 매개변수를 적절히 활용하면 웹 애플리케이션에서 보다 효과적인 데이터 검색 기능을 구현할 수 있습니다.