使用StepZen+GraphQL调用Open-Meteo API时遇Bad Request错误求助

遇到的错误 #

Unhandled Runtime Error
Error: Connector: HTTP Error: Bad Request

Call Stack
call
node_modules\@apollo\client\errors\errors.cjs (31:27)
eval
node_modules\@apollo\client\core\core.cjs (1843:46)
examiner
node_modules\@apollo\client\utilities\utilities.cjs (1072:52)
callback
node_modules\@apollo\client\utilities\utilities.cjs (1065:71)
new Promise
<anonymous>
Object.then
node_modules\@apollo\client\utilities\utilities.cjs (1065:23)
then
node_modules\@apollo\client\utilities\utilities.cjs (1073:48)
call
node_modules\zen-observable\lib\Observable.js (135:17)
notifySubscription
node_modules\zen-observable\lib\Observable.js (179:2)
onNotify
node_modules\zen-observable\lib\Observable.js (235:6)
argument
node_modules\@apollo\client\utilities\utilities.cjs (1055:68)
Array.forEach
<anonymous>
forEach
node_modules\@apollo\client\utilities\utilities.cjs (1055:24)
iterateObserversSafely
node_modules\@apollo\client\utilities\utilities.cjs (1147:20)
call
node_modules\zen-observable\lib\Observable.js (135:17)
notifySubscription
node_modules\zen-observable\lib\Observable.js (179:2)
onNotify
node_modules\zen-observable\lib\Observable.js (235:6)
call
node_modules\@apollo\client\link\http\http.cjs (329:69)

我的查询代码 #

import {gql} from '@apollo/client'

export const fetchWeatherQueries = gql`
  query MyQuery (
    $current_weather: String
    $daily: String = " weathercode,temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,sunrise,sunset,uv_index_max,uv_index_clear_sky_max"
    $hourly: String = "temperature_2m,relativehumidity_2m,apparent_temperature,precipitation_probability,precipitation,rain,showers,snowfall,snow_depth,visibility,windgusts_10m,uv_index,uv_index_clear_sky"
    $latitude: String!
    $longitude: String!
    $timezone: String!
  )  {
    myQuery(
      current_weather: $current_weather
      daily: $daily
      hourly: $hourly
      latitude: $latitude
      longitude: $longitude
      timezone: $timezone
    ) {
      elevation
      generationtime_ms
      latitude
      longitude
      timezone
      timezone_abbreviation
      utc_offset_seconds
      daily_units {
        apparent_temperature_max
        apparent_temperature_min
        sunrise
        sunset
        temperature_2m_max
        time
        temperature_2m_min
        uv_index_clear_sky_max
        uv_index_max
        weathercode
      }
      hourly {
        apparent_temperature
        precipitation
        precipitation_probability
        rain
        relativehumidity_2m
        showers
        snow_depth
        snowfall
        temperature_2m
        time
        uv_index
        uv_index_clear_sky
        visibility
        windgusts_10m
      }
      hourly_units {
        windgusts_10m
        visibility
        uv_index_clear_sky
        uv_index
        time
        temperature_2m
        snowfall
        snow_depth
        showers
        relativehumidity_2m
        rain
        precipitation_probability
        precipitation
        apparent_temperature
      }
      current_weather {
        is_day
        temperature
        time
        weathercode
        winddirection
        windspeed
      }
      daily {
        apparent_temperature_max
        apparent_temperature_min
        sunrise
        sunset
        temperature_2m_max
        temperature_2m_min
        time
        uv_index_clear_sky_max
        uv_index_max
        weathercode
      }
    }
  }
`;

组件页面代码 #

import { getClient } from "@/apollo-client"
import {fetchWeatherQueries} from "@/graphql/queries/fetchWeatherQueries"

type Props ={
  params:{
    city:string,
    latitude:string,
    longitude:string
  }
}

async function WeatherPage({params : {city , latitude , longitude}}:Props) {
  const client = getClient();

  const {data} = await client.query({
    query: fetchWeatherQueries,
    variables:{
      current_weather: "true",
      latitude : latitude,
      longitude : longitude,
      timezone : "auto",
    }
  })

  const results : Root = data.myQuery;

}

可正常访问的API链接 #

https://api.open-meteo.com/v1/forecast?latitude=51.51&longitude=0.13&hourly=temperature_2m,relativehumidity_2m,apparent_temperature,precipitation_probability,precipitation,rain,showers,snowfall,snow_depth,visibility,windgusts_10m,uv_index,uv_index_clear_sky&daily=weathercode,temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,sunrise,sunset,uv_index_max,uv_index_clear_sky_max&current_weather=true&timezone=auto

问题排查与解决方案 #

1. daily参数默认值开头存在多余空格 #

查询代码中$daily的默认值开头有空格：" weathercode,..."，导致StepZen转发请求时，Open-Meteo API接收到的参数带无效空格，无法识别字段，直接返回Bad Request。

修正： 去掉默认值开头的空格：

$daily: String = "weathercode,temperature_2m_max,temperature_2m_min,apparent_temperature_max,apparent_temperature_min,sunrise,sunset,uv_index_max,uv_index_clear_sky_max"

2. 经纬度变量类型错误 #

Open-Meteo API的latitude和longitude接收数值类型，但查询中定义为String!，组件传递的也是字符串格式，不符合API要求。

修正：

• 查询代码中修改变量类型为Float!：

  $latitude: Float!
  $longitude: Float!
  

• 组件中把字符串转成数值后传递：

  variables:{
    current_weather: true,
    latitude: Number(latitude),
    longitude: Number(longitude),
    timezone: "auto",
  }
  

3. current_weather参数类型不匹配 #

Open-Meteo API的current_weather接收布尔值，但查询中定义为String，组件传递字符串"true"，可能导致参数校验失败。

修正：

• 查询代码中修改变量类型为Boolean：

  $current_weather: Boolean
  

• 组件中直接传递布尔值true：

  current_weather: true,
  

验证修改 #

完成以上三点调整后，StepZen会生成符合Open-Meteo API要求的请求参数，即可正常获取天气数据。

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