Theo's Typesafe Cult•9mo ago

TRPC with Google Places API (New)

Has anyone had any luck using TRPC with Google's Places API (New) that only has cURL examples? Here is my attempted router for nearby search using the example from Google's docs (https://developers.google.com/maps/documentation/places/web-service/nearby-search) that gets a generic 400 status. The cURL works, so there's something wrong with the router...or possibly the API 🙃

const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? "";

searchPlacesByLocationNew: publicProcedure
    .input(z.object({ location: z.string() }))
    .mutation(async ({ input }) => {
      const apiUrl = `https://places.googleapis.com/v1/places:searchNearby`;
      const body = JSON.stringify({
        includedTypes: ["restaurant"],
        maxResultCount: 10,
        locationRestriction: {
          circle: {
            center: {
              latitude: 51.5074,
              longitude: -0.1278,
            },
            radius: 500.0,
          },
        },
      });

      try {
        const options = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-Goog-Api-Key": apiKey,
            "X-Goog-FieldMask": "places.displayName",
          },
          body,
        };

        const response = await fetch(apiUrl, options);
        console.log("This is response", response);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = (await response.json()) as NearbySearchResponse;
        console.log("This is data", data);
        return data;
      } catch (error) {
        console.error("Error fetching data from Google Places API:", error);
        return { error: "Failed to fetch data from Google" };
      }
    }),

const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? "";

searchPlacesByLocationNew: publicProcedure
    .input(z.object({ location: z.string() }))
    .mutation(async ({ input }) => {
      const apiUrl = `https://places.googleapis.com/v1/places:searchNearby`;
      const body = JSON.stringify({
        includedTypes: ["restaurant"],
        maxResultCount: 10,
        locationRestriction: {
          circle: {
            center: {
              latitude: 51.5074,
              longitude: -0.1278,
            },
            radius: 500.0,
          },
        },
      });

      try {
        const options = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-Goog-Api-Key": apiKey,
            "X-Goog-FieldMask": "places.displayName",
          },
          body,
        };

        const response = await fetch(apiUrl, options);
        console.log("This is response", response);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = (await response.json()) as NearbySearchResponse;
        console.log("This is data", data);
        return data;
      } catch (error) {
        console.error("Error fetching data from Google Places API:", error);
        return { error: "Failed to fetch data from Google" };
      }
    }),

Google for Developers

Nearby Search (New) | Places API | Google for Developers

Solution:

Solution: Google's documentation/API bugginess leaves a lot to be desired Even though documentation says languageCode is optional, it is required. Adding

languageCode: "en"

languageCode: "en"

to the body returns a valid response....

Jump to solution

1 Reply

Solution

Circus•9mo ago

Solution: Google's documentation/API bugginess leaves a lot to be desired Even though documentation says languageCode is optional, it is required. Adding

languageCode: "en"

languageCode: "en"

to the body returns a valid response.

Gaming

Programming

TRPC with Google Places API (New)