住所から場所を調べる

天気や地図など、多くのAPIは緯度と経度を必要としますが、人は自分の場所を住所で覚えています。useGeocodeフックは、住所を緯度と経度に変換します。

import { useGeocode } from "~lib/geocoding";

export const Widget = () => {
  const { data: place } = useGeocode("London, UK");

  return (
    <div>
      {place.name}: {place.lat}, {place.lon}
    </div>
  );
};

useFetchと同じく、ウィジェットは結果を受け取ってから描画されるので、dataは常にそろっています。

入力項目と組み合わせる

ウィジェットをインストールする人に、住所の入力項目かテキストの入力項目に場所を入力してもらいましょう。その値をuseInputsで読み取ってジオコーディングし、得られた座標を必要なAPIに渡します。

import { useFetch } from "~lib/use-fetch";
import { useGeocode } from "~lib/geocoding";
import { useInputs } from "~lib/use-inputs";

type Forecast = {
  readonly temperature: number;
};

export const Widget = () => {
  const { LOCATION } = useInputs();
  const { data: place } = useGeocode(LOCATION);

  const { data: forecast } = useFetch<Forecast>(
    `https://api.example.com/forecast?lat=${place.lat}&lon=${place.lon}`,
  );

  return (
    <div>
      <h2>{place.name}</h2>
      <p className="text-6xl">{forecast.temperature}°C</p>
    </div>
  );
};

住所が見つからない場合

一致する場所がない住所でも、dataは返されます。その場合、error.messageに問題の説明が入り、それ以外の値はすべて仮の値になります。座標を使う前に確認してください。

const { data: place } = useGeocode(LOCATION);

if (place.error) {
  return (
    <div>
      Couldn't find "{LOCATION}". Check the address in the Widget's settings.
    </div>
  );
}

住所の形式

住所は、次のいずれかの形式で指定すると、最も確実に見つかります。

形式	例
都市名、州、国名	"New York, NY, US"
都市名、国名	"London, UK"
郵便番号、国名	"10001, US"

キャッシュ

住所の位置はめったに変わらないので、結果はプロキシキャッシュに保存されます。同じ住所を調べるフレームはすべて1つの結果を共有するので、ジオコーディングを加えても、ウィジェットの準備にかかる時間はほとんど延びません。

返される値の詳細は、リファレンスのuseGeocodeを参照してください。