[API] use wretch library for easier fetch calls (#429)

Closes DG-138

## What changed? Why?
Moves to using a helper fetch library for the REST & frontend situations
that previously used fetch directly. Similar but nicer API & such.

apps/web/package.json

@@ -12,7 +12,6 @@
     "clean": "rm -rf .next"
   },
   "dependencies": {
-    "api-clients": "workspace:*",
     "@contentful/rich-text-react-renderer": "15.19.0",
     "@contentful/rich-text-types": "16.3.0",
     "@emotion/cache": "11.11.0",
@@ -25,6 +24,7 @@
     "@mui/material": "5.15.2",
     "@next/bundle-analyzer": "14.0.4",
     "animate-css-grid": "1.5.1",
+    "api-clients": "workspace:*",
     "db": "workspace:*",
     "dotenv-mono": "1.3.13",
     "graphql": "16.8.1",
@@ -42,7 +42,8 @@
     "sharp": "0.33.1",
     "swr": "2.2.4",
     "ui": "workspace:*",
-    "webpack": "5.89.0"
+    "webpack": "5.89.0",
+    "wretch": "2.8.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.0.4",

apps/web/src/api/server/spotify/fetchRecentlyPlayed.ts

@@ -12,25 +12,33 @@ const RECENTLY_PLAYED_RESOURCE = 'me/player/recently-played?limit=1';
  * as `null`, or returns full JSON.
  */
 export async function fetchRecentlyPlayed(): Promise<null | Track> {
-  const currentlyPlaying = await spotifyClient.fetch<CurrentlyPlaying>(CURRENTLY_PLAYING_RESOURCE);
-
-  switch (currentlyPlaying.status) {
+  const { response, status } = await spotifyClient.get(CURRENTLY_PLAYING_RESOURCE);
+  switch (status) {
     case 200: {
-      const data = await currentlyPlaying.json();
-      return data?.item ?? null;
+      const { item } = await response.json<CurrentlyPlaying>();
+      return item;
     }
     case 204: {
-      // Fetch the last played song instead
-      const recentlyPlayed = await spotifyClient.fetch<RecentlyPlayed>(RECENTLY_PLAYED_RESOURCE);
-      if (recentlyPlayed.status !== 200) {
-        return null;
-      }
-      const data = await recentlyPlayed.json();
-      const item = data?.items[0];
-      return item ? { ...item.track, played_at: item.played_at } : null;
+      // We aren't currently playing a song but we could have recently played one
+      return fetchLastPlayed();
     }
     default:
       // This could be rate limiting, or auth problems, etc.
       return null;
   }
 }
+
+/**
+ * Fetches the song that last played from spotify using a valid access token.
+ * May have no content, which signifies nothing is playing, which is returned
+ * as `null`, or returns full JSON.
+ */
+async function fetchLastPlayed(): Promise<null | Track> {
+  const { response, status } = await spotifyClient.get(RECENTLY_PLAYED_RESOURCE);
+  if (status !== 200) {
+    return null;
+  }
+  const data = await response.json<RecentlyPlayed>();
+  const item = data.items[0];
+  return item ? { ...item.track, played_at: item.played_at } : null;
+}

apps/web/src/api/server/spotify/spotifyClient.ts

@@ -44,10 +44,10 @@ function createExpirationDate(expiryDistanceInSeconds: number) {
  * A REST client set up to make authed calls to Spotify
  */
 export const spotifyClient = createClient({
-  endpoint: 'https://api.spotify.com/v1',
+  endpoint: 'https://api.spotify.com/v1/',
   accessKey: 'spotify',
   refreshTokenConfig: {
-    endpoint: 'https://accounts.spotify.com/api/token',
+    endpoint: 'https://accounts.spotify.com/api/token/',
     headers: {
       Authorization: `Basic ${SPOTIFY_CLIENT_AUTH}`,
     },

apps/web/src/api/server/strava/fetchStravaActivityFromApi.ts

@@ -7,12 +7,10 @@ import { paredStravaActivity } from './paredStravaActivity';
  * budget. When in doubt, fall back to DB.
  */
 export const fetchStravaActivityFromApi = async (id: number) => {
-  const activity = await stravaClient.fetch<StravaDetailedActivity & Record<string, unknown>>(
-    `activities/${id}`,
-  );
-  if (activity.status !== 200) {
+  const { response, status } = await stravaClient.get(`activities/${id}`);
+  if (status !== 200) {
     return null;
   }
-  const allData = await activity.json();
+  const allData = await response.json<StravaDetailedActivity & Record<string, unknown>>();
   return paredStravaActivity(allData);
 };

apps/web/src/api/server/strava/stravaClient.ts

@@ -21,10 +21,10 @@ invariant(STRAVA_CLIENT_SECRET, 'Missing Strava client secret');
  * A REST client set up to make authed calls to Strava
  */
 export const stravaClient = createClient({
-  endpoint: 'https://www.strava.com/api/v3',
+  endpoint: 'https://www.strava.com/api/v3/',
   accessKey: STRAVA_TOKEN_NAME,
   refreshTokenConfig: {
-    endpoint: 'https://www.strava.com/api/v3/oauth/token',
+    endpoint: 'https://www.strava.com/api/v3/oauth/token/',
     data: {
       client_id: STRAVA_CLIENT_ID,
       client_secret: STRAVA_CLIENT_SECRET,

apps/web/src/api/useData.ts

@@ -1,13 +1,16 @@
 import useSWR from 'swr';
+import wretch from 'wretch';
 import type { AwaitedType, EndpointKey, EndpointType } from './endpoints';
 
+const api = wretch('/api/');
+
 /**
  * Uses a well-typed `fetch` to call an API endpoint using the api
  * key given, then grabs the JSON data from it.
  */
 const fetchData = async <Key extends EndpointKey>(key: Key): Promise<EndpointType<Key>> => {
-  const result = await fetch<EndpointType<Key>>(`/api/${key}`);
-  return result.json();
+  const result = api.get(key);
+  return result.json<EndpointType<Key>>();
 };
 
 /**

packages/api-clients/authenticatedRestClient.ts

@@ -1,3 +1,5 @@
+import type { Wretch } from 'wretch';
+import wretch from 'wretch';
 import type { RefreshTokenConfig } from './RefreshTokenConfig';
 import { refreshedAccessToken } from './refreshedAccessToken';
 
@@ -19,43 +21,44 @@ export type ClientProps = {
 };
 
 /**
- * Returns true if we're authed via status code
+ * Creates a REST client that can be used to fetch resources from a base API, with auto-refreshing
+ * access tokens built into the fetch function.
  */
-const isAuthedStatus = <Type>({ status }: FetchResult<Type>) => !(status >= 400 && status < 500);
+export function createClient({ endpoint, accessKey, refreshTokenConfig }: ClientProps) {
+  const api = wretch(endpoint).content('application/json');
 
-/**
- * Fetches a resource from a base API, after grabbing a refreshed access
- * token if needed first to use for authentication.
- */
-const fetchWithAuth =
-  ({ endpoint, accessKey, refreshTokenConfig }: ClientProps) =>
-  async <Type>(resource: string): Promise<FetchResult<Type | undefined>> => {
-    // Actually fetches, forcing a refreshed key if necessary. Passes Bearer auth and requests JSON
-    const runFetch = async (forceRefresh: boolean) => {
-      const accessToken = await refreshedAccessToken(accessKey, refreshTokenConfig, forceRefresh);
-      return fetch<Type>(`${endpoint}/${resource}`, {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          'Content-Type': 'application/json',
-        },
+  /**
+   * Generates an auth header with a refreshed access token
+   */
+  async function addAuth<Self, Chain, Resolver>(
+    request: Self & Wretch<Self, Chain, Resolver>,
+    forceRefresh: boolean,
+  ) {
+    const accessToken = await refreshedAccessToken(accessKey, refreshTokenConfig, forceRefresh);
+    return request.auth(`Bearer ${accessToken}`);
+  }
+
+  /**
+   * Fetches a resource from the API, using a refreshed access token if necessary. Returns a
+   * Wretch chain that can be used to further process the response based on status code.
+   */
+  async function getWithAuth(resource: string) {
+    const authedApi = await addAuth(api, false);
+    const response = authedApi.get(resource).unauthorized(async (_error, req) => {
+      // Renew credentials once and try to fetch again but fail if we hit another unauthorized
+      const authedReq = await addAuth(req, false);
+      return authedReq.get(resource).unauthorized((err) => {
+        throw err;
       });
+    });
+    const { status } = await response.res().catch((err: { status: number }) => err);
+    return {
+      response,
+      status,
     };
+  }
 
-    // Fetch data normally, refreshing the access token if necessary
-    const data = await runFetch(false);
-    if (isAuthedStatus(data)) {
-      return data;
-    }
-
-    // We weren't authed but in the process of fetching, we refreshed the token,
-    // so try again with that new tokem, and return whatever we have
-    return runFetch(true);
+  return {
+    get: getWithAuth,
   };
-
-/**
- * Creates a REST client that can be used to fetch resources from a base API, with auto-refreshing
- * access tokens built into the fetch function.
- */
-export const createClient = (props: ClientProps) => ({
-  fetch: fetchWithAuth(props),
-});
+}

packages/api-clients/package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "db": "workspace:*",
     "graphql-request": "6.1.0",
-    "shared-core": "workspace:*"
+    "shared-core": "workspace:*",
+    "wretch": "2.8.0"
   },
   "devDependencies": {
     "dotenv-mono": "1.3.13",