코드 실행

코드 실행 작업은 JavaScript를 실행합니다. 워크플로의 이전 단계의 데이터를 코드 실행 작업에 입력으로 전달할 수 있으며 이후 단계에서 사용할 값을 반환할 수 있습니다.

이 페이지의 정보

필드

코드 실행 작업에 포함된 필드는 다음과 같습니다.

코드 실행 작업에서 사용되는 필드입니다.
필드	설명
입력	필수입니다. 이전 단계의 데이터를 코드 실행 작업에 입력으로 사용하는 GraphQL 쿼리 입니다.
출력	필수입니다. GraphQL의 SDL(스키마 정의 언어)에 정의된 작업으로 반환될 데이터의 표현입니다.
코드	필수입니다. 코드 실행 작업이 실행될 JavaScript입니다.

입력 데이터

입력 데이터는 코드 실행 작업 전에 수행하는 단계에서 전달될 수 있습니다. 이 데이터를 포함하려면 입력 필드에 GraphQL 쿼리를 작성할 수 있습니다. 쿼리에서 반환된 데이터는 export default로 표시된 함수에 input 인수로 사용할 수 있으며 관례상 main으로 불립니다.

입력 쿼리는 Shopify Admin API에 대한 쿼리가 아닌 Flow 환경 데이터에 대한 쿼리입니다. 따라서 입력 데이터에 Shopify 쿼리를 삽입할 수 없습니다. 또한 Flow는 쿼리에서 edges 및nodes를 처리하기 때문에 쿼리에 해당 구문이나 기타 페이징 구문을 추가할 필요가 없습니다.

주문 참고 사항과 품목 제목을 받는 예제 입력:

{
  order {
    note
    lineItems {
      title
    }
  }
}

이 데이터는 코드에서 사용될 수 있는 input 변수로 변환됩니다.

export default function main(input) {
  // input.order.note
  // input.order.lineItems[0].title
}

입력은 함수 서명에서 해제될 수도 있습니다.

export default function main({order}) {
  // order.note
  // order.lineItems[0].title
}

메타 필드

코드 실행에서 단일 메타 필드 값에 액세스하려면 먼저 Flow의 환경 데이터에 메타 필드를 추가해야 합니다. 이 작업은 코드 실행 이외의 모든 작업이나 조건에서 수행될 수 있습니다. 예를 들어 로그 출력 작업을 추가한 다음 지침에 따라 메타 필드를 추가할 수 있습니다.

워크플로 환경에 메타 필드가 추가된 후에는 코드 실행에서 메타 필드에 액세스할 수 있습니다. 예를 들어 별칭 이름이 giftMessage인 주문 메타 필드를 추가했다고 가정해 보겠습니다. 그러면 입력 쿼리에서 해당 메타 필드에 액세스할 수 있습니다.

{
  order {
    giftMessage {
      value
    }
  }
}

출력 데이터

코드 실행 작업은 사용자 지정 데이터를 반환할 수 있습니다. 코드에서 반환되는 데이터 유형을 정의하기 위해 출력 필드 및 GraphQL의 SDL(스키마 정의 언어)를 사용합니다. 예를 들어, giftMessage라는 문자열과 totalGifts라는 숫자를 반환하려면:

type Output {
  "The message to include in the gift"
  giftMessage: String!
  "The total number of gifts"
  totalGifts: Int!
}

댓글은 선택 사항이지만 Flow UI의 데이터를 설명하는 데 사용됩니다. JavaScript 코드에서 이 데이터를 출력하기 위해 해당 유형과 일치하는 개체를 반환합니다.

export default function main(input) {
  // your code
  return {
    giftMessage: 'Hello',
    totalGifts: 1,
  };
}

더 복잡한 데이터를 반환하기 위해 사용자 지정 유형을 정의할 수도 있습니다. 예를 들어, message라는 문자열과 amount라는 숫자를 포함하는 Gift라는 유형을 반환하려면:

type Output {
  "The gift to send"
  gifts: [Gift!]!
}

type Gift {
  "The message to include in the gift"
  message: String!
  "The total number of gifts"
  amount: Int!
}

이 작업을 수행하는 단계에서 이 데이터에 액세스하려면 코드 실행이라는 변수를 사용하고, 이 변수는 코드 실행 구성에서 정의한 Output 스키마에 따라 입력됩니다. 조건 및 작업에서 이 변수를 사용할 수 있습니다.

Console.log

console.log를 사용하여 문제 해결을 위해 Flow의 워크플로 실행 로그에 데이터를 출력할 수 있습니다. 워크플로의 실행 로그에 출력이 표시됩니다. 예를 들면 다음은 유효합니다.

export default function main(input) {
  console.log('Hello, world!');
  //Hello, world!
  console.log(input);
  // { order: { note: 'Hello', lineItems: [{ title: 'World' }] } }
  console.log(input.order, "is the order");
  // { note: 'Hello', lineItems: [{ title: 'World' }] }
  // is the order

  return {
    giftMessage: 'Hello',
    totalGifts: 1,
  };
}

코드 실행 작업에서 console.info, console.error 또는 기타 함수를 사용할 수 없습니다.

예

코드 실행 작업의 예제는 Flow 예제 리포지터리에서 찾을 수 있습니다.

제한 사항

코드 실행 작업에는 다음과 같은 제한 사항이 있습니다.

코드 실행 작업은 ECMA2020 JavaScript를 지원합니다. NodeJS 또는 CommonJS API를 지원하지 않거나 모듈을 가져오는 것은 지원하지 않습니다.
코드는 http 호출을 할 수 없습니다(fetch).
무작위이며 시계를 기반으로 하는 기능은 사용할 수 없습니다. scheduledAt 또는 createdAt 등의 날짜 데이터는 입력으로 전달될 수 있습니다.
Console.log는 브라우저 콘솔에 로그를 기록하지 않습니다.
코드 실행 작업에서 메타 필드 별칭을 직접 추가할 수는 없습니다. 이 작업을 수행하는 방법은 메타 필드 섹션을 참조하세요.

또한 다음과 같은 제한이 적용됩니다.

입력 데이터 쿼리는 5,000자로 제한됩니다.
출력 데이터 스키마는 5,000자로 제한됩니다.
출력 데이터 페이로드 및 Console.log 출력의 합산된 크기가 50kb로 제한됩니다.
코드는 50,000자를 초과할 수 없습니다.
총 실행 시간은 5초로 제한됩니다.
메모리 사용은 10MB로 제한됩니다.

로드맵

Flow 팀은 시간에 따라 코드 실행 작업에 기능을 추가할 계획입니다. 다음 표에서는 계획된 개선 사항과 예상 배송 날짜에 대해 간략히 설명합니다.

코드 실행 작업 개선을 위한 로드맵
개선 사항	설명	예상 배송 날짜
로깅	`console.log`를 사용 하여 문제 해결을 위해 실행 로그에 데이터를 출력합니다.	완료됨
외부 API 호출	JavaScript의 가져오기를 사용하여 API를 호출합니다.	2025년 1분기

피드백

코드 실행 작업은 Shopify Flow의 새로운 단계입니다. 피드백과 질문이 있는 경우 이 Flow 커뮤니티 게시물에 댓글을 남겨 주세요.