WPGraphQL突变操作完全指南:创建、更新、删除WordPress数据

【免费下载链接】wp-graphql :rocket: GraphQL API for WordPress 【免费下载链接】wp-graphql 项目地址: https://gitcode.com/gh_mirrors/wp/wp-graphql

WPGraphQL是一个强大的WordPress插件,它为WordPress提供了完整的GraphQL API支持。本指南将详细介绍如何使用WPGraphQL突变操作来创建、更新和删除WordPress数据,帮助你轻松掌握这一强大功能。

什么是WPGraphQL突变操作?

突变(Mutations)是GraphQL中用于修改数据的操作类型。与查询(Queries)用于获取数据不同,突变操作允许你对WordPress数据执行创建、更新和删除操作。WPGraphQL提供了一套完整的突变API,让你能够以直观、高效的方式管理WordPress内容。

WPGraphQL突变操作的优势

  • 类型安全:GraphQL的强类型系统确保你只能提交有效的数据结构
  • 精确控制:只请求你需要的数据,减少不必要的网络传输
  • 单一端点:所有操作通过一个API端点完成,简化开发流程
  • 自文档化:GraphQL模式自动生成文档,使API使用更加直观

开始使用WPGraphQL突变操作

基本突变结构

最简单的突变操作结构如下:

mutation {
  createPost(input: {
    title: "Hello World"
    content: "这是我的第一篇文章"
    status: PUBLISH
  }) {
    post {
      id
      title
    }
  }
}

命名操作

为了提高代码可读性和调试效率,建议为突变操作命名:

mutation CreateNewPost {
  createPost(input: {
    title: "Hello World"
    content: "这是我的第一篇文章"
    status: PUBLISH
  }) {
    post {
      id
      title
    }
  }
}

使用变量

在实际应用中,我们通常使用变量来传递用户输入:

mutation CreateNewPost($input: CreatePostInput!) {
  createPost(input: $input) {
    post {
      id
      title
    }
  }
}

变量数据:

{
  "input": {
    "title": "Hello World",
    "content": "这是我的第一篇文章",
    "status": "PUBLISH"
  }
}

HTTP方法要求

WPGraphQL突变HTTP方法要求

重要提示:突变操作只能使用HTTP POST请求执行。尝试使用GET请求执行突变将导致错误。

// 正确示例:使用POST进行突变
fetch('/graphql', {
  method: 'POST',  // 突变操作必需
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: `mutation { ... }`,
    variables: { }
  })
})

身份验证要求

WPGraphQL突变身份验证错误示例

重要提示:WPGraphQL中的大多数突变操作需要身份验证和适当的用户权限。没有正确的身份验证,你将收到"用户未授权"错误。

例如,创建文章需要用户具有publish_posts权限。有关身份验证的详细信息,请参阅身份验证和授权文档

创建数据:常用创建突变操作

创建文章

mutation CreatePost($input: CreatePostInput!) {
  createPost(input: $input) {
    post {
      id
      title
      status
      uri
    }
  }
}

变量:

{
  "input": {
    "title": "我的新文章",
    "content": "文章内容...",
    "status": "PUBLISH",
    "categories": {
      "nodes": [
        { "id": "category-id-here" }
      ]
    },
    "tags": {
      "nodes": [
        { "id": "tag-id-here" }
      ]
    }
  }
}

成功响应示例:

{
  "data": {
    "createPost": {
      "post": {
        "id": "cG9zdDo1",
        "title": "我的新文章",
        "status": "PUBLISH",
        "uri": "/my-new-post"
      }
    }
  }
}

创建用户

mutation CreateUser($input: CreateUserInput!) {
  createUser(input: $input) {
    user {
      id
      databaseId
      username
      email
      firstName
      lastName
      roles {
        nodes {
          name
        }
      }
    }
  }
}

创建评论

WPGraphQL创建评论示例

mutation CreateComment($input: CreateCommentInput!) {
  createComment(input: $input) {
    comment {
      id
      content
      date
      status
      author {
        node {
          name
          email
        }
      }
    }
  }
}

变量:

{
  "input": {
    "commentOn": 123,           # 要评论的文章ID
    "content": "很棒的文章!",
    "author": "张三",            # 未认证用户必填
    "authorEmail": "zhangsan@example.com",  # 未认证用户必填
    "authorUrl": "https://example.com"  # 可选
  }
}

更新数据:常用更新突变操作

更新文章

mutation UpdatePost($id: ID!, $input: UpdatePostInput!) {
  updatePost(input: {
    id: $id,
    # 只包含你想要更新的字段
    title: $input.title
    content: $input.content
  }) {
    post {
      id
      title
      modified # 文章最后修改时间
    }
  }
}

WPGraphQL更新文章成功示例

更新用户资料

mutation UpdateUser($id: ID!, $input: UpdateUserInput!) {
  updateUser(input: {
    id: $id
    firstName: $input.firstName
    lastName: $input.lastName
    description: $input.description
  }) {
    user {
      id
      firstName
      lastName
      description
      modified
    }
  }
}

更新评论状态

mutation UpdateCommentStatus($id: ID!, $status: CommentStatusEnum!) {
  updateComment(input: {
    id: $id
    status: $status
  }) {
    comment {
      id
      status
    }
  }
}

变量:

{
  "id": "commentID",
  "status": "APPROVE"  # APPROVE, HOLD, SPAM, 或 TRASH
}

删除数据:常用删除突变操作

删除文章

mutation DeletePost($id: ID!) {
  deletePost(input: {
    id: $id,
    # 可选:强制删除而不是移到回收站
    forceDelete: true
  }) {
    # 返回被删除的文章
    post {
      id
      title
    }
    # 文章是否被成功删除
    deleted
  }
}

WPGraphQL删除文章成功示例

注意:默认情况下,删除文章会将其移到回收站。使用forceDelete: true可以永久删除文章。

删除用户

mutation DeleteUser($id: ID!) {
  deleteUser(input: {
    id: $id
    reassignPosts: null  # 可选:将内容重新分配给其他用户的ID
  }) {
    user {
      id
      databaseId
    }
  }
}

重要提示:删除用户时:

  • 考虑他们的内容会如何处理
  • 使用reassignPosts将内容转移给其他用户
  • 确保有适当的用户权限(delete_users)
  • 不能删除自己的用户账户

删除媒体文件

mutation DeleteMediaItem($id: ID!) {
  deleteMediaItem(input: {
    id: $id
    forceDelete: true
  }) {
    mediaItem {
      id
      title
    }
  }
}

突变操作的高级技巧

理解输入类型

每个突变操作都接受特定的输入类型,定义了可以提供的数据:

# 探索输入类型字段
query GetInputFields {
  __type(name: "CreatePostInput") {
    inputFields {
      name
      type {
        name
        kind
      }
      description
    }
  }
}

错误处理

GraphQL错误可能发生在不同级别:

  1. 语法错误:查询格式不正确
  2. 验证错误:变量类型不匹配或必填字段缺失
  3. 授权错误:用户没有执行操作的权限

WPGraphQL突变授权错误示例

提示:始终在应用程序代码中处理错误。成功的HTTP响应(200)仍然可能包含GraphQL错误。

乐观更新

构建用户界面时,你可以在突变完成前更新UI:

function updatePost({ id, title }) {
  // 1. 获取当前数据
  const originalPost = cache.get(id);
  
  // 2. 乐观地更新UI
  cache.update(id, { title });
  
  // 3. 执行突变
  mutation({
    variables: { id, title }
  }).catch(error => {
    // 4. 发生错误时恢复
    cache.update(id, originalPost);
    showError(error);
  });
}

突变操作最佳实践

输入验证

  1. 发送前验证
function validatePostInput(input) {
  const errors = {};
  
  if (!input.title?.trim()) {
    errors.title = "标题是必填项";
  }
  
  if (input.title?.length > 200) {
    errors.title = "标题必须少于200个字符";
  }
  
  return Object.keys(errors).length ? errors : null;
}
  1. 使用适当的类型
# ❌ 避免:使用不适当的变量类型
mutation UpdatePost($id: ID!, $status: String) {
  updatePost(input: { id: $id, status: $status })
}

# ✅ 更好:使用模式中定义的特定类型
mutation UpdatePost($id: ID!, $status: PostStatusEnum!) {
  updatePost(input: { id: $id, status: $status })
}

安全考虑

  1. 净化用户输入
// ❌ 避免:直接使用用户输入
mutation.updatePost({
  content: userInput
});

// ✅ 更好:净化输入
mutation.updatePost({
  content: sanitizeHtml(userInput, allowedTags)
});
  1. 限制查询深度
# ❌ 避免:突变中使用深度嵌套查询
mutation CreatePost($input: CreatePostInput!) {
  createPost(input: $input) {
    post {
      author {
        posts {
          nodes {
            author {
              posts {
                nodes {
                  # 太深了!
                }
              }
            }
          }
        }
      }
    }
  }
}

# ✅ 更好:只请求你需要的数据
mutation CreatePost($input: CreatePostInput!) {
  createPost(input: $input) {
    post {
      id
      title
      author {
        node {
          name
        }
      }
    }
  }
}

性能提示

  1. 批量处理相关更改

避免多次单独的突变,而是在单个突变中进行所有更改。

  1. 选择特定字段

只请求你需要的字段,避免过度获取数据。

总结

WPGraphQL突变操作为WordPress开发者提供了强大而灵活的数据修改能力。通过创建、更新和删除突变,你可以构建完整的内容管理解决方案,而无需编写复杂的REST API端点。

无论是构建自定义管理界面、移动应用还是第三方集成,掌握WPGraphQL突变操作都将极大地提高你的开发效率。开始探索WPGraphQL突变操作的强大功能,释放WordPress作为应用程序数据图的全部潜力!

要了解更多关于WPGraphQL的信息,请参阅完整文档API参考

【免费下载链接】wp-graphql :rocket: GraphQL API for WordPress 【免费下载链接】wp-graphql 项目地址: https://gitcode.com/gh_mirrors/wp/wp-graphql

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐