共享成套业务

共享跨多个前端应用程序和扩展的进出口业务功能.

安装

pnpm add @commercetools-frontend-extensions/operations

钩子

useFileUpload

使用基于任务的导入流程( 创建容器 ) 上传文件的钩子 .

const { upload, isUploading, progress, validationProgress } = useFileUpload({
  projectKey: string,
  pollingInterval?: number,
  maxPollingAttempts?: number
})

参数:

• projectKey (必须): 商务工具项目关键
• pollingInterval (可选) : 投票间隔为ms. 默认 : 5000
• maxPollingAttempts (可选):最大投票尝试. 默认 : 200

回返情况:

• upload - 启动上传的功能
• isUploading - 上传是否在进行
• progress - 上传进度(0-100)
• validationProgress - 说吧 { processed: number, isValidating: boolean }
  • processed: 迄今已验证的资源数量(来自后端)
  • isValidating: 是否在验证中

上传配置选项 :

• file (必须): 要上传的文件
• resourceType (必须): 资源类型
• fileType (可选):文件类型('csv' 或者说 'json')发往API.
• settings (可选):导入设置(格式,小数分隔符.)
• autoProcess (可选) : 何时 true,后端在验证完成后自动开始处理. 默认 : false
• skipValidationPolling (可选) : 何时 true中,跳过全部验证投票,并在工作完成后返回 processing 状态。 用于防火和遗忘的上传 autoProcess: true默认 : false
• abortSignal (可选) : 取消符号
• onSuccess (需要):上传完成后回电
• onError (可选) : 回调错误
• onProgress (可选的):召回上传进度 (0-100)
• onValidationProgress (可选的):召回验证进度

用法 :

import { useFileUpload } from '@commercetools-frontend-extensions/operations'

const { upload, isUploading, progress, validationProgress } = useFileUpload({
  projectKey,
})

const abortController = new AbortController()

await upload({
  file: File,
  resourceType: 'product' | 'category' | ...,
  fileType?: 'csv' | 'json', // override derived file type
  settings?: {
    format?: 'CSV' | 'JSON',
    decimalSeparator?: '.' | ',',
    resourceType?: 'product-draft' | 'category' | ...,
    options?: {
      publishAllChanges?: boolean,
      unpublishAllChanges?: boolean
    }
  },
  autoProcess?: boolean, // default: false
  skipValidationPolling?: boolean, // default: false
  abortSignal: abortController.signal,
  onSuccess: (result) => {
    // result.containerKey - Import container key
    // result.summary - { total, valid, invalid, fields, ignoredFields, results }
    // result.jobId - Job ID
    // result.job - Full job object
  },
  onError: (error) => { /* ... */ },
  onProgress: (progress) => { /* 0-100 */ },
  onValidationProgress: (job) => { /* ... */ }
})

// To cancel:
abortController.abort()

useFetchImportOperations

获取带有可选投票的容器的导入操作.

const { data, error, isLoading, refetch } = useFetchImportOperations({
  projectKey,
  importContainerKey,
  queryParams?: { limit, offset, ... },
  pollingInterval?: number,
  shouldContinuePolling?: (data) => boolean
})

useFetchImportSummaries

以可选投票方式获取导入摘要( 容器) .

const { data, error, isLoading, refetch } = useFetchImportSummaries({
  projectKey,
  queryParams?: { limit, offset, states, ... },
  pollingInterval?: number,
  shouldContinuePolling?: (data) => boolean
})

useFetchImportContainerDetails

获取特定导入容器的细节.

const { data, error, isLoading, refetch } = useFetchImportContainerDetails({
  projectKey,
  importContainerKey,
  pollingInterval?: number,
  shouldContinuePolling?: (data) => boolean
})

useFetchExportOperations

以可选投票方式获取输出操作 .

const { data, error, isLoading, refetch } = useFetchExportOperations({
  projectKey,
  queryParams?: { limit, offset, resourceTypes, ... },
  pollingInterval?: number,
  shouldContinuePolling?: (data) => boolean
})

useFetchFileImportJob

为状态更新提供文件导入任务 .

const { data, error, isLoading, refetch } = useFetchFileImportJob({
  projectKey,
  importContainerKey,
  jobId,
  pollingInterval?: number,
  shouldContinuePolling?: (job) => boolean
})

任务说明 : queued → processing → validated → initializing → ready

useFetchFileImportJobRecords

从文件导入任务中获取记录( 错误或有效条目) , 并带有页码支持 。 在装入新页面时保持先前的数据可见 .

const { data, error, isLoading, refetch } = useFetchFileImportJobRecords({
  projectKey,
  importContainerKey,
  jobId,
  limit?: number,
  offset?: number,
  isValid?: boolean,
  skip?: boolean
})

参数:

• projectKey: 商务工具项目密钥
• importContainerKey: 导入容器密钥
• jobId: 文件导入任务ID
• limit (可选):每页要获取的记录数量
• offset (可选) : 位移
• isValid (可选) : 以有效方式过滤( C)true)或无效(false() 记录
• skip (可选) : 跳过取取( 用于有条件取取取)

回返情况:

• data - 说吧 { results, total, limit, offset, count } 或者说 null
• error - 获取失败时出错对象
• isLoading - 是否正在获取中
• refetch - 手动触发反射功能

用法示例( 贴出错误表) :

const pagination = usePaginationState()
const offset = (pagination.page.value - 1) * pagination.perPage.value

const { data, isLoading } = useFetchFileImportJobRecords({
  projectKey,
  importContainerKey: containerKey,
  jobId,
  offset,
  limit: pagination.perPage.value,
  isValid: false, // Fetch only invalid records (errors)
})

帮助函数

import {
  isImportJobQueued,
  isImportJobProcessing,
  isImportJobValidated,
  isImportJobInitializing,
  isImportJobReady,
  shouldContinuePollingForImportValidation
} from '@commercetools-frontend-extensions/operations'

投票示例

const { data, isLoading } = useFetchImportOperations({
  projectKey,
  importContainerKey,
  pollingInterval: 5000,
  shouldContinuePolling: (data) => {
    return data?.results?.some(op => op.state === 'processing') ?? false
  }
})