graphqlapollonext.js13react-apollo

ApolloError: Connector: HTTP Error: Bad Request - 405


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;

````

Solution

  • 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,
        }, 
      });