Merge pull request #164 from apollographql/dataloader-caching

Add Dataloader and caching for Tracks

.vscode/launch.json

@@ -11,7 +11,10 @@
       "skipFiles": ["<node_internals>/**"],
       "cwd": "${workspaceFolder}/subgraphs/playback",
       "program": "${workspaceFolder}/subgraphs/playback/src/index.ts",
-      "outFiles": ["${workspaceFolder}/subgraphs/playback/dist/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/subgraphs/playback/dist/**/*.js",
+        "${workspaceFolder}/shared/spotify-api/dist/**/*.js"
+      ],
       "preLaunchTask": "tsc: build - subgraphs/playback/tsconfig.json"
     },
     {
@@ -21,7 +24,10 @@
       "skipFiles": ["<node_internals>/**"],
       "cwd": "${workspaceFolder}/subgraphs/spotify",
       "program": "${workspaceFolder}/subgraphs/spotify/src/index.ts",
-      "outFiles": ["${workspaceFolder}/subgraphs/spotify/dist/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/subgraphs/spotify/dist/**/*.js",
+        "${workspaceFolder}/shared/spotify-api/dist/**/*.js"
+      ],
       "preLaunchTask": "tsc: build - subgraphs/spotify/tsconfig.json"
     },
     {

package.json

@@ -13,7 +13,7 @@
     "docker:build:spotify": "docker build -t subgraph-spotify -f ./subgraphs/spotify/Dockerfile .",
     "docker:build:playback": "docker build -t subgraph-playback -f ./subgraphs/playback/Dockerfile .",
     "docker:build:router": "docker build -t showcase-router -f ./router/Dockerfile ./router",
-    "docker:run":"docker-compose --env-file=./.env up --build",
+    "docker:run": "docker-compose --env-file=./.env up --build",
     "format": "prettier . --write",
     "lint": "concurrently \"npm:lint:*\"",
     "lint:format": "prettier . --check",
@@ -25,7 +25,7 @@
     "build": "npm run build -ws",
     "graphos-demo": "ts-node scripts/demo.ts",
     "generate:mocks": "npm run generate:mocks -w spotify-api",
-    "generate:pq":"generate-persisted-query-manifest",
+    "generate:pq": "generate-persisted-query-manifest",
     "start": "npm run start:client",
     "start:all": "concurrently \"npm:dev -w playback-subgraph\" \"npm:dev -w spotify-subgraph\" \"npm:start:router\"",
     "start:client": "npm run start -w client",
@@ -60,6 +60,7 @@
   },
   "dependencies": {
     "@apollo/generate-persisted-query-manifest": "^1.0.0",
+    "@apollo/server-plugin-response-cache": "^4.1.3",
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/fragment-matcher": "^5.0.0",
     "@graphql-codegen/typescript": "^4.0.1",

shared/spotify-api/package.json

@@ -19,6 +19,7 @@
     "@apollo/server": "^4.9.3",
     "@apollo/utils.fetcher": "^2.0.1",
     "@apollo/utils.keyvaluecache": "^2.1.1",
+    "dataloader": "^2.2.2",
     "typescript": "^5.1.6"
   },
   "devDependencies": {

shared/spotify-api/src/client.ts

@@ -14,6 +14,7 @@ import { Spotify, SpotifyDataSource } from 'spotify-api';
 import path from 'path';
 import { GraphQLError } from 'graphql';
 import { ConditionalKeys } from 'type-fest';
+import DataLoader from 'dataloader';
 
 export type OmitNever<T> = Omit<T, ConditionalKeys<T, never>>;
 
@@ -385,13 +386,16 @@ export class SpotifyClient extends RESTDataSource implements SpotifyDataSource {
     );
   }
 
-  getTrack(
+  private trackLoader = new DataLoader(async (ids) => {
+    const trackList = await this.getTracks({ ids: ids.join(',') });
+    return ids.map((id) => trackList.tracks.find((track) => track.id === id));
+  });
+
+  async getTrack(
     id: string,
     params?: Spotify.Request.QueryParams.GET['/tracks/:id']
   ) {
-    return this._get<Spotify.Response.GET['/tracks/:id']>(`/tracks/${id}`, {
-      params,
-    });
+    return this.trackLoader.load(id);
   }
 
   getTrackAudioFeatures(trackId: string) {

shared/spotify-api/src/dataSource.ts

@@ -143,7 +143,7 @@ export interface SpotifyDataSource {
   getTrack(
     id: string,
     params?: Spotify.Request.QueryParams.GET['/tracks/:id']
-  ): Promise<Spotify.Response.GET['/tracks/:id']>;
+  ): Promise<Spotify.Object.Track | undefined>;
   getTrackAudioFeatures(
     trackId: string
   ): Promise<Spotify.Response.GET['/audio-features/:id']>;

subgraphs/spotify/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@apollo/server": "^4.9.3",
+    "@apollo/server-plugin-response-cache": "^4.1.3",
     "@apollo/subgraph": "^2.5.5",
     "@graphql-tools/mock": "^9.0.0",
     "@graphql-tools/schema": "^10.0.0",

subgraphs/spotify/src/resolvers/PlaybackItem.ts

@@ -9,7 +9,8 @@ export const PlaybackItem: PlaybackItemResolvers = {
         return 'Track';
     }
   },
-  async __resolveReference(playbackItem, { dataSources }) {
+  async __resolveReference(playbackItem, { dataSources }, info) {
+    (info as any).cacheControl.setCacheHint({ maxAge: 60, scope: 'PRIVATE' });
     // This is strictly for a demo, not a good practice
     const id = playbackItem.id;
     try {

subgraphs/spotify/src/resolvers/Track.ts

@@ -36,7 +36,8 @@ export const Track: TrackResolvers = {
     is_playable === undefined ? true : is_playable,
   previewUrl: prop('preview_url'),
   trackNumber: prop('track_number'),
-  __resolveReference: (track, { dataSources }) => {
+  __resolveReference: (track, { dataSources }, info) => {
+    (info as any).cacheControl.setCacheHint({ maxAge: 60, scope: 'PUBLIC' });
     return dataSources.spotify.getTrack(track.id);
   },
 };

subgraphs/spotify/src/utils/server.ts

@@ -11,6 +11,7 @@ import { ContextValue } from '../types/ContextValue';
 import logger from '../logger';
 import * as Sentry from '@sentry/node';
 import { resolve } from 'path';
+import responseCachePlugin from '@apollo/server-plugin-response-cache';
 
 const schemaPath = existsSync('schema.graphql')
   ? 'schema.graphql'
@@ -35,6 +36,7 @@ export const server = new ApolloServer<ContextValue>({
   introspection: true,
   logger,
   plugins: [
+    responseCachePlugin(),
     {
       async requestDidStart() {
         return {