Directives

작성자: J113 양아림

Directives (지시어)

• 변수를 사용하여 쿼리의 구조와 형태를 동적으로 변경하기 위한 GraphQL 의 기능
• version 관리를 @deprecated 등을 통해서 쉽게 할 수 있다.
• field 나 fragment등에 삽입 될 수 있다.
• Directives가 삽입되는 순서에 따라서 동작이 달라진다.
• Directive Definition: Directives 정의 방법

Default Directives

@skip

directive @skip(if: Boolean!) on FIELD | FRAGMENT_SPREAD | INLINE_FRAGMENT

# FIELD
query skipField($someTest: Boolean!) {
  users{
    name
    age
  }
  books{
    title
    author @skip(if: $someTest)
  }  
}

# INLINE_FRAGMENT
query skipFragmentInline($someTest: Boolean!) {
  users{
    name
    age
  }
  books @skip(if: $someTest){
    title
    author
  } 
}

# FRAGMENT_SPREAD
query skipFragment($someTest: Boolean!) {
  users{
    ...userField
  }
  books @skip(if: $someTest){
    ...bookField
  } 
}

fragment userField on User{
  name
  age
}
fragment bookField on Book{
  title
  author
}

@include

directive @include(if: Boolean!) on FIELD | FRAGMENT_SPREAD | INLINE_FRAGMENT

# FIELD
query skipField($someTest: Boolean!) {
  users{
    name
    age
  }
  books{
    title
    author @include(if: $someTest)
  }  
}

@deprecated

directive @deprecated(reason: String = "No longer supported") on FIELD_DEFINITION | ENUM_VALUE

#FIELD_DEFINITION
type ExampleType {
    newField: String
    oldField: String @deprecated(reason: "Use 'newField'.")
}

#ENUM_VALUE
enum AllowedColor {
    RED @deprecated
    GREEN
    BLUE
}

Custom Directives

• Apollo server가 지원하는 schemaDirectiveVisitor를 사용하여 custom directive를 정의할 수 있다.
• Implementing directives Examples: Custom Directives 예시

// Directive 정의
class UpperCaseDirective extends SchemaDirectiveVisitor {
  visitFieldDefinition(field) {
  //FiedlDefintion에 대한 정의
    const { resolve = defaultFieldResolver } = field;
    field.resolve = async function (...args) {
      const result = await resolve.apply(this, args);
      if (typeof result === 'string') {
        return result.toUpperCase();
      }
      return result;
    };
  }
}

// Directive 생성 및 사용
const typeDefs = gql`
  directive @upper on FIELD_DEFINITION

  type Query {
    hello: String @upper
  }
`;

//resolver
const resolvers = {
  Query: {
    hello: (parent, args, context) => {
      return 'Hello world!';
    },
  },
};

//ApolloServer에 custom directive 추가
const server = new ApolloServer({
  typeDefs,
  resolvers,
  schemaDirectives: {
    upper: UpperCaseDirective,
    upperCase: UpperCaseDirective
    //하나의 custom Directive class를 여러개의 directives로 추가 할 수 있음
  }
});

• Schema directives: graphql-tools 를 이용한 custom directives