Loving Tina? us on GitHub0.0k
v.Latest
Documentation

提交前函数

Loading last updated info...
在此页面上

提交前函数允许你在表单提交到后端之前在前端运行一个函数，并可选择性地修改文档的值。

定义

import { TinaCMS, Form } from 'tinacms'


type BeforeSubmitFunction = (args: {
  values: Record<string, unknown>
  cms: TinaCMS
  form: Form
}) => Promise<void | Record<string, unknown>>

查询内容

可以使用 cms 参数在 beforeSubmit 中查询内容。生成的客户端在配置中不可用，因此通过将原始的 GraphQL 查询字符串传递给 cms.api.tina.request() 来进行查询。

// tina/config.{ts,js}


const slugCheckQuery = `#graphql
  query ($filter: PageFilter) {
    pageConnection(filter: $filter) {
      edges {
        node {
          ... on Document {
            _sys {
              path
            }
          }
        }
      }
    }
  }
`


export default defineConfig({
  schema: {
    collections: [
      {
        ui: {
          beforeSubmit: async ({
            form,
            cms,
            values,
          }: {
            form: Form
            cms: TinaCMS
            values: Record<string, any>
          }) => {
            const slug = (values.slug ?? '').toString().trim().toLowerCase()
            if (!slug) return values


            const tinaAPI = (cms as TinaCMS).api?.tina


            const { data } = await tinaAPI?.request(slugCheckQuery, {
              variables: { filter: { slug: { eq: slug } } },
            })


            const currentId = form.id
            const conflict = data?.pageConnection?.edges?.find(
              (edge) => edge?.node?._sys?.path !== currentId
            )


            if (conflict) {
              throw new Error(
                `Slug "${slug}" 已被另一个页面使用。`
              )
            }


            return values
          },
          //...
        },
        //...
      },
      //...
    ],
  },
  //...
})

示例

添加最后更新字段

// tina/config.{ts.js}


export default defineConfig({
  schema: {
    collections: [
      {
        ui: {
          // 提交前示例
          beforeSubmit: async ({
            form,
            cms,
            values,
          }: {
            form: Form
            cms: TinaCMS
            values: Record<string, any>
          }) => {
            return {
              ...values,
              lastUpdated: new Date().toISOString(),
            }
          },
          //...
        },
        //...
      },
      //...
    ],
  },
  //...
})

添加创建时间字段

export default defineConfig({
  schema: {
    collections: [
      {
        ui: {
          beforeSubmit: async ({
            form,
            cms,
            values,
          }: {
            form: Form
            cms: TinaCMS
            values: Record<string, any>
          }) => {
            if (form.crudType === 'create') {
              return {
                ...values,
                createdAt: new Date().toISOString(),
              }
            }
          },
          //...
        },
        //...
      },
      //...
    ],
  },
  //...
})

添加 slug 字段

export default defineConfig({
  schema: {
    collections: [
      {
        ui: {
          beforeSubmit: async ({
            form,
            cms,
            values,
          }: {
            form: Form
            cms: TinaCMS
            values: Record<string, any>
          }) => {
            return {
              ...values,
              slug: values.title
                .toLowerCase()
                .replace(/ /g, '-')
                .replace(/[^\w-]+/g, ''),
            }
          },
          //...
        },
        //...
      },
      //...
    ],
  },
  //...
})
上一页
文件名自定义