I have a nextjs 14 weather project and i'm using Graphql, Apollo and stepzen for the first time. I had a error like that;
⨯ node_modules/@apollo/client/errors/index.js (28:27) @ call
ApolloError: Connector: HTTP Error: Bad Request
at new Promise (<anonymous>)
at Array.forEach (<anonymous>)
null
⨯ node_modules/@apollo/client/errors/index.js (28:27) @ call
⨯ ApolloError: Response not successful: Received status code 405
at new Promise (<anonymous>)
at Array.forEach (<anonymous>)
digest: "1155966032"
This is page.tsx in location/[city]/[lat]/[long]
import { getClient } from "../../../../../../apollo-client";
import fetchWeatherQuery from "../../../../../../graphql/queries/fetchWeatherQueries";
type Props = {
params: {
city: string;
lat: string;
long: string;
};
};
async function weatherPage({ params: { city, lat, long } }: Props) {
const client = getClient();
const { data } = await client.query({
query: fetchWeatherQuery,
variables: {
current: "true",
daily: "true",
hourly: "true",
latitude: lat,
longitude: long,
timezone: "GMT",
pastdays: "false",
},
});
const result: Root = data.myQuery;
console.log(result);
return <div>Weater page {city + lat + long}</div>;
}
export default weatherPage;
apollo_client.ts
import { ApolloClient, InMemoryCache } from "@apollo/client";
let client: ApolloClient<any> | null = null;
export const getClient = () => {
console.log(process.env.API_URL);
client = new ApolloClient({
uri: process.env.API_URL,
cache: new InMemoryCache(),
headers: {
Authorization: `apikey ${process.env.STEPZEN_API_KEY}`,
},
});
return client;
};
and fetchWeatherQuery.ts
import { gql } from "@apollo/client";
const fetchWeatherQuery = gql`
query myQuery(
$current: String
$daily: String
$hourly: String
$latitude: String
$longitude: String
$past_days: String
$timezone: String
) {
myQuery(
current: $current
daily: $daily
hourly: $hourly
latitude: $latitude
longitude: $longitude
past_days: $past_days
timezone: $timezone
) {
current {
interval
temperature_2m
time
}
current_units {
interval
temperature_2m
time
}
daily {
temperature_2m_max
time
weather_code
}
daily_units {
temperature_2m_max
time
weather_code
}
elevation
generationtime_ms
hourly {
apparent_temperature
dew_point_2m
precipitation_probability
relative_humidity_2m
temperature_2m
time
uv_index
uv_index_clear_sky
}
hourly_units {
apparent_temperature
dew_point_2m
precipitation_probability
relative_humidity_2m
temperature_2m
time
uv_index
uv_index_clear_sky
}
latitude
longitude
timezone
timezone_abbreviation
utc_offset_seconds
}
}
`;
export default fetchWeatherQuery;
````
The problem was about the a mismatch. I was sending variables to getClient wrongly. I edited below and its working now;
const { data } = await client.query({
query: fetchWeatherQuery,
variables: {
daily: "temperature_2m_max",
current: "temperature_2m",
hourly: "temperature_2m",
timezone: "Europe/Moscow",
latitude: lat,
longitude: long,
},
});