๋ธ”๋กœ๊ทธ

๐Ÿ™Œ Gato GraphQL์ด ์ด์ œ Advanced Custom Fields (ACF)๋ฅผ ์™„์ „ํžˆ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค!

Leonardo Losoviz
์ž‘์„ฑ์ž: Leonardo Losoviz ยท

์ง€๋‚œ์ฃผ์— ์ถœ์‹œ๋œ Gato GraphQL v11.3์—์„œ๋Š” ๋ฉ”ํƒ€ ๋ฎคํ…Œ์ด์…˜์ด ์ œ๊ณต๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฉ”ํƒ€ ํ•„๋“œ์™€ ๊ฒฐํ•ฉํ•˜๊ณ  PRO ํ™•์žฅ ๊ธฐ๋Šฅ์ด ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ๊ณผ ์—ฐ๋™ํ•จ์œผ๋กœ์จ, ๋ฉ”ํƒ€ ๋ฎคํ…Œ์ด์…˜์„ ์‚ฌ์šฉํ•˜์—ฌ Advanced Custom Fields (ACF) ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ์™„์ „ํžˆ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ปค์Šคํ…€ ํ•„๋“œ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์ˆ˜์ •ํ•˜๋Š” ๊ฒƒ ๋ชจ๋‘ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์ฆ‰, Gato GraphQL์€ ์ด์ œ ACF๋ฅผ ์™„์ „ํžˆ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค! ๐ŸŽ‰๐Ÿฅณ๐Ÿ‘๐Ÿพ๐Ÿ™Œ๐ŸŽŠ๐Ÿป

๋‹ค์Œ์€ ACF๊ฐ€ ์ง€์›ํ•˜๋Š” ๋ชจ๋“  ํ•„๋“œ ํƒ€์ž…์— ๋Œ€ํ•ด ์ปค์Šคํ…€ ํ•„๋“œ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์ˆ˜์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ์ฃผ๋Š” ์—ฌ๋Ÿฌ ์ฟผ๋ฆฌ์ž…๋‹ˆ๋‹ค.

ACF๊ฐ€ ์ง€์›ํ•˜๋Š” ํ•„๋“œ ํƒ€์ž…
ACF๊ฐ€ ์ง€์›ํ•˜๋Š” ํ•„๋“œ ํƒ€์ž…

๊ธฐ๋ณธ ํ•„๋“œ ํƒ€์ž… ์ฟผ๋ฆฌ

ACF์˜ ๊ธฐ๋ณธ ํ•„๋“œ ํƒ€์ž…์€ metaValue ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง์ ‘ ์ฟผ๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

query GetPost {
  post(by: { id: 1 }) {
    text: metaValue(key: "text_field")
    textarea: metaValue(key: "textarea_field")
    number: metaValue(key: "number_field")
    range: metaValue(key: "range_field")
    email: metaValue(key: "email_field")
    url: metaValue(key: "url_field")
    password: metaValue(key: "password_field")
  }
}

์ฝ˜ํ…์ธ  ํ•„๋“œ ํƒ€์ž… ์ฟผ๋ฆฌ

์ปค์Šคํ…€ ํ•„๋“œ๊ฐ€ ๊ด€๊ณ„(์˜ˆ: ์ด๋ฏธ์ง€๋‚˜ ํŒŒ์ผ)์ธ ๊ฒฝ์šฐ, ๋ฉ”ํƒ€ ํ•„๋“œ์—์„œ ID๋ฅผ ๋‚ด๋ณด๋‚ด๊ณ  ์ดํ›„ ์ฟผ๋ฆฌ์—์„œ ํ•ด๋‹น ์—”ํ‹ฐํ‹ฐ(Media ํƒ€์ž…)๋ฅผ ๋ฐ”๋กœ ์ฟผ๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ์™ธ์˜ ๊ฒฝ์šฐ์—๋Š” ๋‹จ์ˆœ ํ•„๋“œ ํƒ€์ž…์ด๋ฏ€๋กœ metaValue๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง์ ‘ ์ฟผ๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

query GetPostDataAndExportRelationships {
  post(by: { id: 1 }) {
    # Image field type
    imageId: metaValue(key: "image_field")
      @export(as: "imageId")
 
    # File field type
    fileId: metaValue(key: "file_field")
      @export(as: "fileId")
 
    # WYSIWYG editor field type
    wysiwyg_editor: metaValue(key: "wysiwyg_editor_field")
 
    # Oembed field type
    oembed: metaValue(key: "oembed_field")    
  }
}
 
query QueryPostRelationships
  @depends(on: "GetPostDataAndExportRelationships")
{  
  # Query the image
  relationshipImage: mediaItem(by: { id: $imageId }) {
    id
    src
  }
 
  # Query the file
  relationshipFile: mediaItem(by: { id: $fileId }) {
    id
    src
  }
}

์„ ํƒ ํ•„๋“œ ํƒ€์ž… ์ฟผ๋ฆฌ

์„ ํƒ ํ•„๋“œ ํƒ€์ž…์€ metaValue๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹จ์ˆœ ํ•„๋“œ ํƒ€์ž…์ฒ˜๋Ÿผ ์ฟผ๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ACF๋Š” ๊ฐ’์˜ ๋ฐฐ์—ด์„ JSON ๋ฌธ์ž์—ด๋กœ ์ธ์ฝ”๋”ฉํ•˜์—ฌ ๋‹จ์ผ ํ•ญ๋ชฉ์— ์ €์žฅํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ๋ฐฐ์—ด์„ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด metaValues ๋Œ€์‹  metaValue ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ถˆ๋ฆฌ์–ธ ๊ฐ’์˜ ๊ฒฝ์šฐ _equals ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ String์—์„œ Boolean์œผ๋กœ ํ˜•๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

query GetPost {
  post(by: { id: 1 }) {
    # Select field type - Whether a single or multiple values, we always use `metaValue`
    select: metaValue(key: "select_field")
    multiSelect: metaValue(key: "multi_select_field")
 
    # Checkbox field type
    checkbox: metaValue(key: "checkbox_field")
 
    # Radio button field type
    radioButton: metaValue(key: "radio_button_field")
 
    # Button group field type
    buttonGroup: metaValue(key: "button_group_field")
 
    # True/False field type
    trueFalseAsString: metaValue(key: "true_false_field")
    trueFalse: _equals(value1: $__trueFalseAsString, value2: "1")
  }
}

๊ด€๊ณ„ํ˜• ํ•„๋“œ ํƒ€์ž… ์ฟผ๋ฆฌ

์ปค์Šคํ…€ ํ•„๋“œ๊ฐ€ ๊ด€๊ณ„(์˜ˆ: ๊ฒŒ์‹œ๋ฌผ, ์‚ฌ์šฉ์ž, ํƒ์†Œ๋…ธ๋ฏธ ๋“ฑ)์ธ ๊ฒฝ์šฐ, ๋ฉ”ํƒ€ ํ•„๋“œ์—์„œ ID๋ฅผ ๋‚ด๋ณด๋‚ด๊ณ  ์ดํ›„ ์ฟผ๋ฆฌ์—์„œ ํ•ด๋‹น ์—”ํ‹ฐํ‹ฐ(Post, User, Taxonomy ํƒ€์ž… ๋“ฑ)๋ฅผ ๋ฐ”๋กœ ์ฟผ๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ์™ธ์˜ ๊ฒฝ์šฐ์—๋Š” ๋‹จ์ˆœ ํ•„๋“œ ํƒ€์ž…์ด๋ฏ€๋กœ metaValue๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง์ ‘ ์ฟผ๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

query GetPostDataAndExportRelationships {
  post(by: { id: 1 }) {
    link: metaValue(key: "link_field")
    
    # Post Object field type
    post_object: metaValue(key: "post_object_field")
      @export(as: "post_object_id")
 
    # Multiple Post Object field type
    post_objects: metaValue(key: "post_objects_field")
      @export(as: "post_object_ids")
    
    # Page Link field type
    page_link: metaValue(key: "page_link_field")
      @export(as: "page_link_id")
 
    # Multiple Page Link field type
    page_links: metaValue(key: "page_links_field")
      @export(as: "page_link_ids")
    
    # Relationship field type
    relationships: metaValue(key: "relationship_field")
      @export(as: "relationship_ids")
    
    # Taxonomy field type
    categoryTaxonomy: metaValue(key: "category_taxonomy_field")
      @export(as: "category_taxonomy_ids")
 
    tagTaxonomy: metaValue(key: "tag_taxonomy_field")
      @export(as: "tag_taxonomy_ids")
 
    # User field type
    user: metaValue(key: "user_field")
      @export(as: "user_id")
 
    # Multiple User field type
    users: metaValue(key: "users_field")
      @export(as: "user_ids")
  }
}
 
query QueryPostRelationships
  @depends(on: "GetPostDataAndExportRelationships")
{  
  # Query the post
  postObject: customPost(by: { id: $post_object_id }, status: any) {
    id
    title
  }
 
  # Query the list of posts
  postObjects: customPosts(filter: { ids: $post_object_ids, status: any }, pagination: { limit: -1 }) {
    id
    title
  }
   
  # Query the page
  pageLink: page(by: { id: $page_link_id }, status: any) {
    id
    title
  }
 
  # Query the list of pages
  pageLinks: pages(filter: { ids: $page_link_ids, status: any }, pagination: { limit: -1 }) {
    id
    title
  }
 
  # Query the relationship post
  relationships: customPosts(filter: { ids: $relationship_ids, status: any }, pagination: { limit: -1 }) {
    id
    title
  }
 
  # Query the list of categories
  categoryTaxonomy: categories(filter: { ids: $category_taxonomy_ids }, taxonomy: "category") {
    id
    name
  }
 
  # Query the list of tags
  tagTaxonomy: tags(filter: { ids: $tag_taxonomy_ids }, taxonomy: "post_tag") {
    id
    name
  }
 
  # Query the user
  user: user(by: { id: $user_id }) {
    id
    name
  }
 
  # Query the list of users
  users: users(filter: { ids: $user_ids }, pagination: { limit: -1 }) {
    id
    name
  }
}

๋‚ ์งœ ํ•„๋“œ ํƒ€์ž… ์ฟผ๋ฆฌ

๋‚ ์งœ๋Š” "YMD" ํ˜•์‹์˜ ๋ฌธ์ž์—ด(์˜ˆ: "20240320")๋กœ ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์—, ํƒ€์ž„์Šคํƒฌํ”„๋กœ ํŒŒ์‹ฑํ•œ ํ›„ _date ํ•จ์ˆ˜์— ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

query GetPost {
  post(by: { id: 1 }) {
    # Date Picker field
    dateAsString: metaValue(key: "date_picker_field")
    dateYear: _strSubstr(string: $__dateAsString, offset: 0, length: 4)
    dateMonth: _strSubstr(string: $__dateAsString, offset: 4, length: 2)
    dateDay: _strSubstr(string: $__dateAsString, offset: 6, length: 2)
    dateAsTimestamp: _makeTime(year: $__dateYear, month: $__dateMonth, day: $__dateDay, hour: 0, minute: 0, second: 0)
    date: _date(format: "Y-m-d", timestamp: $__dateAsTimestamp)
 
    # Date Time Picker field
    dateTime: metaValue(key: "date_time_picker_field")
 
    # Time Picker field
    timeAsString: metaValue(key: "time_picker_field")
    timeHours: _strSubstr(string: $__timeAsString, offset: 0, length: 2)
    timeMinutes: _strSubstr(string: $__timeAsString, offset: 3, length: 2)
    timeSeconds: _strSubstr(string: $__timeAsString, offset: 6, length: 2)
 
    googleMap: metaValue(key: "google_map_field")
    colorPicker: metaValue(key: "color_picker_field")
  }
}

๋ชจ๋“  ํ•„๋“œ ํƒ€์ž… ๋ฎคํ…Œ์ด์…˜

๋ฉ”ํƒ€ ํ•„๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ACF ์ปค์Šคํ…€ ํ•„๋“œ๋ฅผ ์ถ”๊ฐ€, ์ˆ˜์ •, ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค.

์ด ์ฟผ๋ฆฌ๋Š” ๋‹จ์ผ JSON ๊ฐ์ฒด๋ฅผ updatePost ๋ฎคํ…Œ์ด์…˜์— ์ „๋‹ฌํ•˜์—ฌ ์—ฌ๋Ÿฌ ACF ์ปค์Šคํ…€ ํ•„๋“œ๋ฅผ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.

(JSON์—๋Š” ํ•ญ๋ชฉ์ด ๋‹จ์ผ ๊ฐ’์ด๋”๋ผ๋„ ๊ฐ’์˜ ๋ฐฐ์—ด์ด ํฌํ•จ๋˜์–ด ์žˆ์Œ์— ์œ ์˜ํ•˜์„ธ์š”.)

mutation UpdatePost($postId: ID!) {
  updatePost(
    input: {
      id: $postId
      meta: {
        text_field: ["New text value"],
        textarea_field: ["New textarea value"],
        select_field: ["New select value"],
        multi_select_field: ["Choice 1", "Choice 2"],
        number_field: [42],
        date_picker_field: ["20240320"],
      }
    }
  ) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    post {
      id
      text: metaValue(key: "text_field")
      textarea: metaValue(key: "textarea_field")
      select: metaValue(key: "select_field")
      multiSelect: metaValues(key: "multi_select_field")
      number: metaValue(key: "number_field")
      date: metaValue(key: "date_picker_field")
    }
  }
}

์ด ์ฟผ๋ฆฌ๋Š” updateCustomPostMeta ๋ฎคํ…Œ์ด์…˜์„ ์‚ฌ์šฉํ•˜์—ฌ ACF ์ปค์Šคํ…€ ํ•„๋“œ๋ฅผ ์ผ๊ด„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.

mutation UpdatePost($postId: ID!) {
  updateCustomPostMetas(inputs: [
    { id: $postId, key: "text_field", value: "New text value" },
    { id: $postId, key: "textarea_field", value: "New textarea value" },
    { id: $postId, key: "select_field", value: "New select value" },
    { id: $postId, key: "multi_select_field", value: ["Choice 1", "Choice 2"] },
    { id: $postId, key: "number_field", value: 42 },
    { id: $postId, key: "date_picker_field", value: "20240320" },
  ]) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    customPost {
      __typename
      id
      text: metaValue(key: "text_field")
      textarea: metaValue(key: "textarea_field")
      select: metaValue(key: "select_field")
      multiSelect: metaValues(key: "multi_select_field")
      number: metaValue(key: "number_field")
      date: metaValue(key: "date_picker_field")
    }
  }
}

๋‰ด์Šค๋ ˆํ„ฐ ๊ตฌ๋…ํ•˜๊ธฐ

Gato GraphQL์˜ ๋ชจ๋“  ์—…๋ฐ์ดํŠธ๋ฅผ ๋†“์น˜์ง€ ๋งˆ์„ธ์š”.