TTC
Theo's Typesafe Cult•11mo ago
Circus

Using TRPC with Google's Place Details

Has anyone been able to properly set up a TRPC router with Google's Place Details API? (https://developers.google.com/maps/documentation/places/web-service/place-details) Doing the curl command from the link works fine, so it's something with the TRPC request (Status 400 HTTP error). I've also tried passing the parameters as headers in the options field to no avail 
export const googleRouter = createTRPCRouter({
  getPlaceDetails: publicProcedure
    .input(z.object({ placeId: z.string() }))
    .query(async ({ input }) => {
      const placeId = "ChIJN1t_tDeuEmsRUsoyG83frY4";
      const apiKey = process.env.GOOGLE_DETAILS_API_KEY ?? ""; // Ensure this is set in your environment
      const apiUrl = `https://places.googleapis.com/v1/places/ChIJj61dQgK6j4AR4GeTYWZsKWw?fields=id,displayName&key=${apiKey}`;
      

      try {
        const options = {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "X-Goog-Api-Key": apiKey,
            "X-Goog-FieldMask":
              "id,displayName,formattedAddress,plusCode,rating",
          },
        };

        const response = await fetch(apiUrl, options);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = (await response.json()) as PlaceResult;
        return data; // Ensure that the data is returned
      } catch (error) {
        console.error(
          "Error fetching data from Google Place Details API:",
          error
        );
        return { error: "Failed to fetch data from Google" }; // Return an error object instead of throwing
      }
    }),
});

// ChIJ2dGMjMMEdkgRqVqkuXQkj7c   Big Ben
// ChIJN1t_tDeuEmsRUsoyG83frY4   Google Office Sydney
// ChIJj61dQgK6j4AR4GeTYWZsKWw   from example on https://developers.google.com/maps/documentation/places/web-service/place-details
export const googleRouter = createTRPCRouter({
  getPlaceDetails: publicProcedure
    .input(z.object({ placeId: z.string() }))
    .query(async ({ input }) => {
      const placeId = "ChIJN1t_tDeuEmsRUsoyG83frY4";
      const apiKey = process.env.GOOGLE_DETAILS_API_KEY ?? ""; // Ensure this is set in your environment
      const apiUrl = `https://places.googleapis.com/v1/places/ChIJj61dQgK6j4AR4GeTYWZsKWw?fields=id,displayName&key=${apiKey}`;
      

      try {
        const options = {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "X-Goog-Api-Key": apiKey,
            "X-Goog-FieldMask":
              "id,displayName,formattedAddress,plusCode,rating",
          },
        };

        const response = await fetch(apiUrl, options);
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = (await response.json()) as PlaceResult;
        return data; // Ensure that the data is returned
      } catch (error) {
        console.error(
          "Error fetching data from Google Place Details API:",
          error
        );
        return { error: "Failed to fetch data from Google" }; // Return an error object instead of throwing
      }
    }),
});

// ChIJ2dGMjMMEdkgRqVqkuXQkj7c   Big Ben
// ChIJN1t_tDeuEmsRUsoyG83frY4   Google Office Sydney
// ChIJj61dQgK6j4AR4GeTYWZsKWw   from example on https://developers.google.com/maps/documentation/places/web-service/place-details
Google for Developers
Place Details (New)  |  Places API  |  Google for Developers
5 Replies
Sturlen
Sturlen•11mo ago
could post the specific error message? without it it's pretty difficult to debug anything
Circus
CircusOP•11mo ago
@Sturlen of course, apologies. Also to note, other third party routers set up similarly work without issue, so I suspect it's something that has to be different for Google 
Error fetching data from Google Place Details API: Error: HTTP error! Status: 400
    at eval (webpack-internal:///(api)/./src/server/api/routers/google.ts:30:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolveMiddleware (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/index.mjs:416:30)
    at async callRecursive (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/index.mjs:452:32)
    at async callRecursive (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/index.mjs:452:32)
    at async resolve (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/index.mjs:482:24)
    at async file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/resolveHTTPResponse-e1286cb3.mjs:87:32
    at async Promise.all (index 0)
    at async resolveHTTPResponse (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/resolveHTTPResponse-e1286cb3.mjs:84:28)
    at async file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/nodeHTTPRequestHandler-f0efcff4.mjs:32:24
    at async file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/adapters/next.mjs:42:9
Error fetching data from Google Place Details API: Error: HTTP error! Status: 400
    at eval (webpack-internal:///(api)/./src/server/api/routers/google.ts:30:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolveMiddleware (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/index.mjs:416:30)
    at async callRecursive (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/index.mjs:452:32)
    at async callRecursive (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/index.mjs:452:32)
    at async resolve (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/index.mjs:482:24)
    at async file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/resolveHTTPResponse-e1286cb3.mjs:87:32
    at async Promise.all (index 0)
    at async resolveHTTPResponse (file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/resolveHTTPResponse-e1286cb3.mjs:84:28)
    at async file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/nodeHTTPRequestHandler-f0efcff4.mjs:32:24
    at async file:///Users/RemovedMyName/folder/node_modules/.pnpm/@[email protected]/node_modules/@trpc/server/dist/adapters/next.mjs:42:9
Sturlen
Sturlen•11mo ago
if google is sending a response in json, you might be able to log it when !response.ok and find more details: 
if (!response.ok) {
           const data = (await response.json())
console.log("Error Response:", data)
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
if (!response.ok) {
           const data = (await response.json())
console.log("Error Response:", data)
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
this is just for debugging. in the long term you should probably return the data in the error
Circus
CircusOP•11mo ago
Okay, yeah that debugging helped. Thank you @Sturlen ! The error message from your debugging is: 
"Invalid language code '*'. See the list of supported languages at https://developers.google.com/maps/faq#languagesupport\n"
"Invalid language code '*'. See the list of supported languages at https://developers.google.com/maps/faq#languagesupport\n"
I've never touched anything with language before. Adding &languageCode=en to the end of the apiUrl resolved the issue...so an error in Google's code since it is required after all and their default breaks the request?
Sturlen
Sturlen•11mo ago
yeah that's an odd one. glad you figured it out though
Want results from more Discord servers?
Add your server