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;
````
1
40x errors on a GraphQL query can be caused by a mismatch between the query you send and the query definition on the server. For example you might have used the wrong types for variables (weird that you use
String
for all variables including those that could be boolean or float for example). Or you may have asked for fields that not part of the return object. Also any spelling errors in variable names will cause the query to fail. Test the query in your sandbox/GraphiQL environment first.1 hour ago