ApolloError: Connector: HTTP Error: Bad Request – 405

ApolloError: Connector: HTTP Error: Bad Request – 405


0

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.

    – Michel Floyd

    1 hour ago


Load 7 more related questions


Show fewer related questions

0



Leave a Reply

Your email address will not be published. Required fields are marked *