在NuxtJS中通过Apollo执行GraphQL mutation的方法求助

你之前的写法错误在于把mutation放在了apollo配置项中——这个选项是用来声明**自动执行的查询（Query）**的，Mutation需要通过this.$apollo.mutate方法主动调用，而非自动挂载执行。

以下是正确的实现步骤：

1. 导入Mutation文件 #

确保你的createArticle是正确的GraphQL Mutation定义文件：

import createPost from "~/apollo/queries/actualitesEtNewsletters/createArticle";

2. 在方法中执行Mutation #

将Mutation的执行逻辑封装在组件的方法里，通过this.$apollo.mutate异步调用：

export default {
  methods: {
    async createActualitesEtNewsletters(postData) {
      try {
        const result = await this.$apollo.mutate({
          // 指定要执行的Mutation
          mutation: createPost,
          // 传入Mutation所需的变量（根据你的GraphQL schema定义调整）
          variables: {
            data: {
              title: postData.title,
              content: postData.content,
              // 其他字段...
            }
          },
          // 设置请求头（比如JWT授权）
          context: {
            headers: {
              authorization: "Bearer JWT_TOKEN"
            }
          }
        });

        // 处理成功响应
        console.log("条目创建成功", result.data.createArticle);
        // 可在此处添加刷新列表、提示用户等逻辑
      } catch (error) {
        // 处理错误情况
        console.error("创建失败", error.message);
      }
    }
  }
};

3. 触发Mutation #

你可以通过用户交互（比如按钮点击）或者钩子函数来调用这个方法：

<template>
  <button @click="handleCreate">创建条目</button>
</template>

<script>
// ... 导入和方法定义 ...
export default {
  // ...
  methods: {
    // ... 上面的createActualitesEtNewsletters方法 ...
    handleCreate() {
      const postData = {
        title: "我的新文章",
        content: "文章内容示例"
      };
      this.createActualitesEtNewsletters(postData);
    }
  }
};
</script>

关键注意事项 #

• Mutation是主动触发的操作，不会像Query那样在组件挂载时自动执行
• 必须传入variables字段，对应Mutation定义中的参数（如果你的Mutation需要接收参数）
• 如果所有请求都需要授权头，建议在Nuxt Apollo的全局配置中设置，避免重复编写：

  // nuxt.config.js
  export default {
    apollo: {
      clientConfigs: {
        default: {
          httpEndpoint: "YOUR_STRAPI_GRAPHQL_ENDPOINT",
          httpLinkOptions: {
            headers: {
              authorization: "Bearer JWT_TOKEN"
            }
          }
        }
      }
    }
  };
  

内容的提问来源于stack exchange，提问作者MH info