log weekly june 2024 shopify metafield

Shopify 앱 메타필드

2024년 6월 13일 목요일

Today I Learned

날짜

2024년 6월 13일 목요일

내용

앱 메타필드

이번 스프린트는 인스타그램에서 댓글을 가져와 위젯으로 표시해주어야 한다. 기존처럼 쇼피파이에 있는 앱프록시를 이용해 서버쪽에서 처리하기보단, 앱 메타필드에 렌더링된 HTML 전체를 올려놓는 방식을 취해보기로 했다. 그동안은 샵 메타필드를 이용했었기 떄문에 그 샵이 설치한 다른 앱과 공유하는 메타필드였다.

앱 메타필드는 우리가 독점적으로 사용할 수 있으며, 앱을 삭제하면 자동으로 삭제된다는 장점이 있다. 다른 앱들은 유료화 기능에 이용한다고 하는데, 우린 이번 스프린트에 활용해보기로 했다. 단점이라면, 위젯의 HTML이 모두 올라가있기 떄문에 위젯과 관련된 데이터가 변경되는 즉시 메타필드에도 적용되야 한다. 이참에 앱 메타필드를 다루는 클래스를 만들어놓기만 하면 어렵진 않을것 같다.

최근 설치된 앱의 아이디를 불러오고, 메타필드 고유 아이디에 이용하는 방식인것 같은데.. 제대로 됐는지 확인하기 위해 GraphQL을 깔고 메타필드를 다시 설치하는 과정에서 “최근 설치된” 앱의 아이디가 바뀌어버렸다. 새로운 스토어에 새롭게 깔아서 올바른 앱 아이디로 추가했는데 여전히 메타필드가 비어있다고 나온다.

알고보니 해당 앱에서 조회했을떄만 내용이 나온다!

Shopify GraphQL 앱에서 우리의 IC앱 전용으로 만든 메타필드를 조회하면

1
2
3
4
5
6

{
  "data": {
    "appInstallation": {
      "metafield": null
    }
  },

이렇게 아무것도 없는것처럼 나오지만, 우리 앱에서 가지고 있는 스토어의 액세스토큰으로 접근해서 조회해보니

1
2
3
4
5
6
7
8
9
10
11

"data": {
    "currentAppInstallation": {
      "id": "gid://shopify/AppInstallation/397866336339",
      "metafield": {
        "id": "gid://shopify/Metafield/32992218415187",
        "namespace": "instagram_com",
        "key": "itiskey",
        "value": "{\"id\":4,\"instagram_comments_shop_id\":6,\"comment_date\":false,\"commenter_name\":true,\"commenter_profile_image\":true,\"number_of_likes\":true,\"instagram_profile_button\":true,\"instagram_post_button\":false,\"color\":\"#000000\"}",
        "type": "json"
      }
    }

이렇게 잘나온다. 내가 해냄! 클래스로 잘 정의해서 누구나 쉽게 쓸수 있게 만들어야겠다.

회고

생각보다 금방 끝날줄 알았는데 생각보다 할게 또 많다.

CATALOG
    weekly