Vue3充电站预订应用无法向GraphQL API提交数据求助

核心排查点及解决方法 #

1. 严格匹配Mutation变量与表单数据的键名 #

首先确认你的GraphQL Mutation定义中的变量名，和组件中传递的变量键名完全一致，包括大小写。

比如你的Mutation是：

mutation CreateBooking($stationId: ID!, $bookingTime: String!) {
  createBooking(stationId: $stationId, bookingTime: $bookingTime) {
    id
  }
}

那提交时必须用stationId和bookingTime作为键名，不能写成station_id或bookTime这类变体：

// 错误写法（键名不匹配）
mutate({
  station_id: formData.stationId,
  booking_time: formData.bookingTime
});

// 正确写法
mutate({
  stationId: formData.stationId,
  bookingTime: formData.bookingTime
});

2. 检查变量传递的格式（针对输入类型的情况） #

如果你的GraphQL Schema使用了自定义输入类型，比如：

input CreateBookingInput {
  stationId: ID!
  bookingTime: String!
}

type Mutation {
  createBooking(input: CreateBookingInput!): Booking!
}

那调用Mutation时必须把变量包装在input对象里，同时更新Mutation定义：

mutation CreateBooking($input: CreateBookingInput!) {
  createBooking(input: $input) {
    id
  }
}

组件中的调用代码也要对应调整：

mutate({
  input: {
    stationId: formData.stationId,
    bookingTime: formData.bookingTime
  }
});

3. 确认表单数据确实被正确捕获 #

在调用mutate之前，打印表单数据确认所有必填字段都有值，避免出现undefined或空字符串：

console.log('表单数据:', formData);
// 确认stationId、bookingTime等字段都存在且不为空
mutate(/* 变量 */);

4. 验证Apollo Client配置 #

检查main.js中的Apollo Client配置，确保API地址正确，没有请求拦截导致变量丢失：

import { createApp } from 'vue';
import { DefaultApolloClient } from '@vue/apollo-composable';
import { ApolloClient, InMemoryCache } from '@apollo/client/core';

const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000/graphql', // 确认本地API地址正确
  cache: new InMemoryCache(),
});

const app = createApp(App);
app.provide(DefaultApolloClient, apolloClient);
app.mount('#app');

5. 用调试工具定位问题 #

• 打开Apollo Client DevTools，查看发送的GraphQL请求，检查Variables面板是否有缺失的字段
• 查看后端GraphQL服务器的控制台日志，确认接收到的变量是否为空

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