GraphQL은 클라이언트가 정확히 원하는 데이터를 요청할 수 있도록 하는 강력한 쿼리 언어입니다. 쿼리 변수를 사용하여 클라이언트가 쿼리 실행 시점에 값을 제공할 수 있습니다. 이는 매우 유용하며, 동적인 요청을 보내거나 여러 번 사용되는 값을 중복해서 작성하지 않아도 됩니다.

쿼리 변수 정의하기

쿼리 변수를 사용하려면 $로 시작하는 변수 이름을 정의해야 합니다. 예를 들어, 사용자의 ID를 인수로 전달받아 특정 사용자의 정보를 요청하려는 경우 다음과 같이 쿼리 변수를 정의할 수 있습니다.

query ($userID: ID!) {
  user(id: $userID) {
    name
    email
  }
}

위의 예제에서 $userID는 쿼리 변수를 나타냅니다. 또한, ID 형식으로 타입이 지정되었으며, 느낌표는 해당 변수가 필수임을 나타냅니다.

쿼리 실행 시점에 값 전달하기

JavaScript에서는 GraphQL 쿼리를 실행할 때 쿼리 변수에 실제 값들을 전달합니다. 예를 들어, Apollo Client를 사용하는 경우 다음과 같이 쿼리를 실행할 수 있습니다.

client.query({
  query: gql`
    query UserDetails($userID: ID!) {
      user(id: $userID) {
        name
        email
      }
    }
  `,
  variables: {
    userID: '123',
  },
})

위의 예제에서 variables 객체는 쿼리 변수에 전달될 값들을 정의합니다.

쿼리 변수를 사용하면 동적인 GraphQL 요청을 보내기 쉽고, 재사용 가능한 쿼리를 만들 수 있습니다.

참조:

• GraphQL 공식 문서
• Apollo Client 문서