如何正确格式化Svelte URQL 2.0的mutation/queryStore请求避免AST报错

抛出Invalid AST Node: [function query]的核心原因是@urql/svelte的mutationStore传参不符合API规范：

• 直接将GraphQL变量对象作为第三个位置参数传入，导致库内部参数解析逻辑出错，误将内部封装的query函数识别为待解析的GraphQL AST节点，最终触发类型错误。
• 额外区分：mutationStore创建后不会自动发起请求，需要主动调用执行方法才会发送请求；queryStore创建后会立即自动执行查询，二者执行逻辑不要混淆。

推荐使用官方建议的单配置对象传参方式，避免位置传参的顺序错误，实现代码如下：

import { mutationStore, gql } from "@urql/svelte";
import client from "../client.js";

const loginMutation = gql`
   mutation ($email: String!, $password: String!) {
      login(email: $email, password: $password) {
         secret
         ttl
      }
   }
`;

// 初始化mutation store
const login = mutationStore({
  client,
  query: loginMutation,
  variables: {
    email: "shadid12@email.com",
    password: "123456"
  }
});

// 绑定到交互事件触发请求，比如表单提交
async function submitLogin() {
  const result = await login.executeMutation();
  // 处理返回结果
  if (result.data) {
    console.log('登录成功，返回secret:', result.data.login.secret);
  }
  if (result.error) {
    console.error('请求报错:', result.error);
  }
}

• 若要读取store内的响应式状态（请求加载状态、返回数据、错误信息），需要使用Svelte的$订阅语法，比如$login.data、$login.fetching，直接console整个store对象无法拿到实际请求数据。
• 如果坚持使用三位置参数写法，第三个参数必须是配置对象，变量要包裹在variables字段内，不能直接传变量对象，示例：mutationStore(client, loginMutation, { variables: { email: "...", password: "..." } })
• 确保使用的gql标签是从@urql/svelte导入的，不要从其他graphql相关依赖导入，避免生成的AST结构不兼容。

内容的提问来源于stack exchange，提问作者Kishan Sripada