Shopify Storefront API를 사용하여 제품 가져오기

이제 Shopify 스토어를 만들고 API 키를 가지고 있으며 이제 이를 사용하여 제품을 보기 위한 호출을 만들려고 합니다.

스키마는 어떻게 생겼습니까?! ¯|(ツ)/¯
Shopify는 모든 개발자가 종종 그렇지 않은 GraphQL 구문에 익숙하다고 가정합니다.

전화를 걸 때마다 먼저 해당 호출에 전달할 쿼리를 정의해야 합니다. 이것은 몇 시간 동안 나를 망가뜨렸다. 시간.

이러한 쿼리는 간단하지만 매우 구체적입니다.
GraphQL을 매우 인기 있게 만든 것은 바로 이 특수성이며 매우 구체적인 쿼리는 매우 구체적인 데이터만 반환합니다. 이는 더 작은 API 응답을 의미하며, 이는 데이터 요금제 제한이 있거나 인터넷 속도가 느린 사용자에게 매우 친숙합니다.

이것은 또한 우리가 사용할 수 있는 데이터를 확인하기 위해 콘솔에 로그인할 수 있는 개체를 반환하는 호출을 할 수 없다는 것을 의미합니다. 어 오.

먼저 쿼리에서 원하는 데이터를 정의해야 합니다. 즉, 호출하기 전에 스키마를 알아야 합니다.

¯|(ツ)/¯

아래 코드는 Shopify 관리 인터페이스를 통해 스토어에서 판매할 2개의 제품을 이미 생성한 경우 스토어에서 처음 2개의 제품을 가져옵니다.
shop_id는 상점 API 키입니다.client_id는 상점 URL입니다. 예를 들어 ' https://my-store.myshopify.com '은 'my-store'를 상점 이름으로 바꾸면 됩니다.

const query = '{ products(first: 2) { edges { node { id title } } } }'; 

  function apiCall(query) { 
    return fetch(
      `${shop_id}/api/2022-01/graphql.json`,
      { method: 'POST', 
        headers: {
          'Content-Type': 'application/graphql',
          'X-Shopify-Storefront-Access-Token': `${client_id}`
        },
        'body': query
      })
      .then(response => response.json())
  }
  apiCall(query).then(response => { console.log(response) });

봐query ....저게 뭐야? 모서리란 무엇입니까? 노드란? 왜 이렇게 구성되어 있습니까? ¯|(ツ)/¯

이제 제품이 콘솔에 표시되어야 합니다!

...하지만 그렇지 않다면...

2 부

일부(또는 전체) 제품이 표시되지 않는 이유는 무엇입니까?
반품되지 않는 제품이 관련 판매 채널(Storefront API 채널)에서 제공되지 않을 수 있습니다. 다음을 수정할 수 있습니다.

다음에서 제품 섹션을 방문하십시오.
' https://my-store.myshopify.com/admin/products '
'my-store'를 상점 이름으로 바꾸십시오.

여기에서 꽤 이상해 지므로 나와 함께 맨손으로:

표시되지 않는 항목 옆의 확인란을 클릭합니다. 항목 자체를 클릭하면 다른 곳으로 이동합니다(이것은 일종의 미친 것으로 나타났습니다).

확인란을 선택한 후 "상품 편집"을 클릭하십시오

상단의 필드 추가 드롭다운을 클릭합니다

.

그런 다음 "판매 채널"섹션에서 다음을 모두 선택합니다.

Shopify GraphiQL 앱에서 사용 가능

온라인 스토어에서 사용 가능

Nextjs 연결 가능
이렇게 하면 "제품 편집"페이지에 3개의 열이 채워지고 각 열에는 선택되지 않은 상자가 있습니다. 계속 진행하여 이 상자를 선택합니다.

그런 다음 상단의 "저장"을 클릭하십시오.

이제 가도 됩니다!

이것은 모두 매우 직관적이지 않고 이해하기 힘든 골칫거리였습니다. 내가 Shopify Storefront API를 탐색하는 것보다 더 쉬운 시간을 보내고 있기를 바랍니다. 해피 해킹!