From 3cf10d5659243364d4d2274d2479e6455b126698 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 08:45:28 -0700 Subject: [PATCH 01/64] Upgrade to alpha of client and codegen --- client/package.json | 2 +- package-lock.json | 266 +++++++++++++++++++++++++++++++++----------- package.json | 2 +- 3 files changed, 201 insertions(+), 69 deletions(-) diff --git a/client/package.json b/client/package.json index 20b084cd..b8c2c818 100644 --- a/client/package.json +++ b/client/package.json @@ -6,7 +6,7 @@ "node": ">=18" }, "dependencies": { - "@apollo/client": "^3.9.5", + "@apollo/client": "^3.12.0-alpha.0", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", diff --git a/package-lock.json b/package-lock.json index e1230705..8428239f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@graphql-codegen/cli": "^4.0.1", "@graphql-codegen/fragment-matcher": "^5.0.0", "@graphql-codegen/typescript": "^4.0.1", - "@graphql-codegen/typescript-operations": "^4.0.1", + "@graphql-codegen/typescript-operations": "4.4.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "@graphql-codegen/typescript-resolvers": "^4.0.1", "dotenv": "^16.3.1", "inquirer": "^8.2.5", @@ -47,7 +47,7 @@ "client": { "version": "0.1.0", "dependencies": { - "@apollo/client": "^3.9.5", + "@apollo/client": "^3.12.0-alpha.0", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", @@ -108,6 +108,48 @@ "node": ">=18" } }, + "client/node_modules/@apollo/client": { + "version": "3.12.0-alpha.0", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-alpha.0.tgz", + "integrity": "sha512-gRgkKnfn+Za9T3NjkQxy19ujGdNzAasSMl6kH0WuslUFHDB2xIbZc/IvLUguwVv53jMwTD+rhTsYzy/50WsyDg==", + "dependencies": { + "@graphql-typed-document-node/core": "^3.1.1", + "@wry/caches": "^1.0.0", + "@wry/equality": "^0.5.6", + "@wry/trie": "^0.5.0", + "graphql-tag": "^2.12.6", + "hoist-non-react-statics": "^3.3.2", + "optimism": "^0.18.0", + "prop-types": "^15.7.2", + "rehackt": "^0.1.0", + "response-iterator": "^0.2.6", + "symbol-observable": "^4.0.0", + "ts-invariant": "^0.10.3", + "tslib": "^2.3.0", + "zen-observable-ts": "^1.2.5" + }, + "peerDependencies": { + "graphql": "^15.0.0 || ^16.0.0", + "graphql-ws": "^5.5.5", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0", + "subscriptions-transport-ws": "^0.9.0 || ^0.11.0" + }, + "peerDependenciesMeta": { + "graphql-ws": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "subscriptions-transport-ws": { + "optional": true + } + } + }, "client/node_modules/@apollo/rover": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@apollo/rover/-/rover-0.16.2.tgz", @@ -128,6 +170,23 @@ "npm": ">=6" } }, + "client/node_modules/rehackt": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.1.0.tgz", + "integrity": "sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==", + "peerDependencies": { + "@types/react": "*", + "react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "client/node_modules/type-fest": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz", @@ -191,6 +250,7 @@ "version": "3.9.5", "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.9.5.tgz", "integrity": "sha512-7y+c8MTPU+hhTwvcGVtMMGIgWduzrvG1mz5yJMRyqYbheBkkky3Lki6ADWVSBXG1lZoOtPYvB2zDgVfKb2HSsw==", + "peer": true, "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", @@ -2415,44 +2475,37 @@ "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" }, "node_modules/@graphql-codegen/plugin-helpers": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-5.0.0.tgz", - "integrity": "sha512-suL2ZMkBAU2a4YbBHaZvUPsV1z0q3cW6S96Z/eYYfkRIsJoe2vN+wNZ9Xdzmqx0JLmeeFCBSoBGC0imFyXlkDQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-5.1.0.tgz", + "integrity": "sha512-Y7cwEAkprbTKzVIe436TIw4w03jorsMruvCvu0HJkavaKMQbWY+lQ1RIuROgszDbxAyM35twB5/sUvYG5oW+yg==", "dependencies": { "@graphql-tools/utils": "^10.0.0", "change-case-all": "1.0.15", "common-tags": "1.8.2", "import-from": "4.0.0", "lodash": "~4.17.0", - "tslib": "~2.5.0" + "tslib": "~2.6.0" + }, + "engines": { + "node": ">=16" }, "peerDependencies": { "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, - "node_modules/@graphql-codegen/plugin-helpers/node_modules/tslib": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", - "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" - }, "node_modules/@graphql-codegen/schema-ast": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@graphql-codegen/schema-ast/-/schema-ast-4.0.0.tgz", - "integrity": "sha512-WIzkJFa9Gz28FITAPILbt+7A8+yzOyd1NxgwFh7ie+EmO9a5zQK6UQ3U/BviirguXCYnn+AR4dXsoDrSrtRA1g==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@graphql-codegen/schema-ast/-/schema-ast-4.1.0.tgz", + "integrity": "sha512-kZVn0z+th9SvqxfKYgztA6PM7mhnSZaj4fiuBWvMTqA+QqQ9BBed6Pz41KuD/jr0gJtnlr2A4++/0VlpVbCTmQ==", "dependencies": { - "@graphql-codegen/plugin-helpers": "^5.0.0", + "@graphql-codegen/plugin-helpers": "^5.0.3", "@graphql-tools/utils": "^10.0.0", - "tslib": "~2.5.0" + "tslib": "~2.6.0" }, "peerDependencies": { "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, - "node_modules/@graphql-codegen/schema-ast/node_modules/tslib": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", - "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" - }, "node_modules/@graphql-codegen/typescript": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.0.1.tgz", @@ -2469,24 +2522,63 @@ } }, "node_modules/@graphql-codegen/typescript-operations": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-4.0.1.tgz", - "integrity": "sha512-GpUWWdBVUec/Zqo23aFLBMrXYxN2irypHqDcKjN78JclDPdreasAEPcIpMfqf4MClvpmvDLy4ql+djVAwmkjbw==", + "version": "4.4.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-4.4.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-ydrzKO462ShQ5JJzm/Pvn/OAkadB+kalP9cYviD8LM6bDQNaHH3dgqNPWINhDL0Pd0vRWpI3Qe+eElyTOPqjNA==", "dependencies": { - "@graphql-codegen/plugin-helpers": "^5.0.0", - "@graphql-codegen/typescript": "^4.0.1", - "@graphql-codegen/visitor-plugin-common": "4.0.1", + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-codegen/typescript": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "@graphql-codegen/visitor-plugin-common": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "auto-bind": "~4.0.0", - "tslib": "~2.5.0" + "tslib": "~2.6.0" + }, + "engines": { + "node": ">=16" }, "peerDependencies": { "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, - "node_modules/@graphql-codegen/typescript-operations/node_modules/tslib": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", - "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" + "node_modules/@graphql-codegen/typescript-operations/node_modules/@graphql-codegen/typescript": { + "version": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-jWnMVzGWC6nNc1C+ZW8bTB5okH1j2YX6qvWmEgEsFO4i7Vob7A2pgZbaOCpQRsmBdfmAdYw3X2Jz2QwhiU6wsg==", + "dependencies": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-codegen/schema-ast": "^4.0.2", + "@graphql-codegen/visitor-plugin-common": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "auto-bind": "~4.0.0", + "tslib": "~2.6.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" + } + }, + "node_modules/@graphql-codegen/typescript-operations/node_modules/@graphql-codegen/visitor-plugin-common": { + "version": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-BBEecMNqAerwLdNeiwGTY6kpyVTpWrYM5AvIGPBbYTbEQugIOxH96QFazsu+2Xn9wnHuLhevBXRMyk7OKSbNCQ==", + "dependencies": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-tools/optimize": "^2.0.0", + "@graphql-tools/relay-operation-optimizer": "^7.0.0", + "@graphql-tools/utils": "^10.0.0", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.15", + "dependency-graph": "^0.11.0", + "graphql-tag": "^2.11.0", + "parse-filepath": "^1.0.2", + "tslib": "~2.6.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" + } }, "node_modules/@graphql-codegen/typescript-resolvers": { "version": "4.0.1", @@ -15769,6 +15861,7 @@ "version": "0.0.5", "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.0.5.tgz", "integrity": "sha512-BI1rV+miEkaHj8zd2n+gaMgzu/fKz7BGlb4zZ6HAiY9adDmJMkaDcmuXlJFv0eyKUob+oszs3/2gdnXUrzx2Tg==", + "peer": true, "peerDependencies": { "@types/react": "*", "react": "*" @@ -19180,6 +19273,7 @@ "version": "3.9.5", "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.9.5.tgz", "integrity": "sha512-7y+c8MTPU+hhTwvcGVtMMGIgWduzrvG1mz5yJMRyqYbheBkkky3Lki6ADWVSBXG1lZoOtPYvB2zDgVfKb2HSsw==", + "peer": true, "requires": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", @@ -20650,40 +20744,26 @@ } }, "@graphql-codegen/plugin-helpers": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-5.0.0.tgz", - "integrity": "sha512-suL2ZMkBAU2a4YbBHaZvUPsV1z0q3cW6S96Z/eYYfkRIsJoe2vN+wNZ9Xdzmqx0JLmeeFCBSoBGC0imFyXlkDQ==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-5.1.0.tgz", + "integrity": "sha512-Y7cwEAkprbTKzVIe436TIw4w03jorsMruvCvu0HJkavaKMQbWY+lQ1RIuROgszDbxAyM35twB5/sUvYG5oW+yg==", "requires": { "@graphql-tools/utils": "^10.0.0", "change-case-all": "1.0.15", "common-tags": "1.8.2", "import-from": "4.0.0", "lodash": "~4.17.0", - "tslib": "~2.5.0" - }, - "dependencies": { - "tslib": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", - "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" - } + "tslib": "~2.6.0" } }, "@graphql-codegen/schema-ast": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@graphql-codegen/schema-ast/-/schema-ast-4.0.0.tgz", - "integrity": "sha512-WIzkJFa9Gz28FITAPILbt+7A8+yzOyd1NxgwFh7ie+EmO9a5zQK6UQ3U/BviirguXCYnn+AR4dXsoDrSrtRA1g==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@graphql-codegen/schema-ast/-/schema-ast-4.1.0.tgz", + "integrity": "sha512-kZVn0z+th9SvqxfKYgztA6PM7mhnSZaj4fiuBWvMTqA+QqQ9BBed6Pz41KuD/jr0gJtnlr2A4++/0VlpVbCTmQ==", "requires": { - "@graphql-codegen/plugin-helpers": "^5.0.0", + "@graphql-codegen/plugin-helpers": "^5.0.3", "@graphql-tools/utils": "^10.0.0", - "tslib": "~2.5.0" - }, - "dependencies": { - "tslib": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", - "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" - } + "tslib": "~2.6.0" } }, "@graphql-codegen/typescript": { @@ -20706,21 +20786,45 @@ } }, "@graphql-codegen/typescript-operations": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-4.0.1.tgz", - "integrity": "sha512-GpUWWdBVUec/Zqo23aFLBMrXYxN2irypHqDcKjN78JclDPdreasAEPcIpMfqf4MClvpmvDLy4ql+djVAwmkjbw==", + "version": "4.4.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript-operations/-/typescript-operations-4.4.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-ydrzKO462ShQ5JJzm/Pvn/OAkadB+kalP9cYviD8LM6bDQNaHH3dgqNPWINhDL0Pd0vRWpI3Qe+eElyTOPqjNA==", "requires": { - "@graphql-codegen/plugin-helpers": "^5.0.0", - "@graphql-codegen/typescript": "^4.0.1", - "@graphql-codegen/visitor-plugin-common": "4.0.1", + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-codegen/typescript": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "@graphql-codegen/visitor-plugin-common": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "auto-bind": "~4.0.0", - "tslib": "~2.5.0" + "tslib": "~2.6.0" }, "dependencies": { - "tslib": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", - "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" + "@graphql-codegen/typescript": { + "version": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-jWnMVzGWC6nNc1C+ZW8bTB5okH1j2YX6qvWmEgEsFO4i7Vob7A2pgZbaOCpQRsmBdfmAdYw3X2Jz2QwhiU6wsg==", + "requires": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-codegen/schema-ast": "^4.0.2", + "@graphql-codegen/visitor-plugin-common": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "auto-bind": "~4.0.0", + "tslib": "~2.6.0" + } + }, + "@graphql-codegen/visitor-plugin-common": { + "version": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-BBEecMNqAerwLdNeiwGTY6kpyVTpWrYM5AvIGPBbYTbEQugIOxH96QFazsu+2Xn9wnHuLhevBXRMyk7OKSbNCQ==", + "requires": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-tools/optimize": "^2.0.0", + "@graphql-tools/relay-operation-optimizer": "^7.0.0", + "@graphql-tools/utils": "^10.0.0", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.15", + "dependency-graph": "^0.11.0", + "graphql-tag": "^2.11.0", + "parse-filepath": "^1.0.2", + "tslib": "~2.6.0" + } } } }, @@ -24678,7 +24782,7 @@ "client": { "version": "file:client", "requires": { - "@apollo/client": "^3.9.5", + "@apollo/client": "^3.12.0-alpha.0", "@apollo/persisted-query-lists": "^1.0.0", "@apollo/rover": "^0.16.2", "@mdx-js/rollup": "^2.3.0", @@ -24734,6 +24838,27 @@ "web-vitals": "^2.1.4" }, "dependencies": { + "@apollo/client": { + "version": "3.12.0-alpha.0", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-alpha.0.tgz", + "integrity": "sha512-gRgkKnfn+Za9T3NjkQxy19ujGdNzAasSMl6kH0WuslUFHDB2xIbZc/IvLUguwVv53jMwTD+rhTsYzy/50WsyDg==", + "requires": { + "@graphql-typed-document-node/core": "^3.1.1", + "@wry/caches": "^1.0.0", + "@wry/equality": "^0.5.6", + "@wry/trie": "^0.5.0", + "graphql-tag": "^2.12.6", + "hoist-non-react-statics": "^3.3.2", + "optimism": "^0.18.0", + "prop-types": "^15.7.2", + "rehackt": "^0.1.0", + "response-iterator": "^0.2.6", + "symbol-observable": "^4.0.0", + "ts-invariant": "^0.10.3", + "tslib": "^2.3.0", + "zen-observable-ts": "^1.2.5" + } + }, "@apollo/rover": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@apollo/rover/-/rover-0.16.2.tgz", @@ -24746,6 +24871,12 @@ "detect-libc": "^2.0.0" } }, + "rehackt": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.1.0.tgz", + "integrity": "sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==", + "requires": {} + }, "type-fest": { "version": "3.13.1", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz", @@ -30451,6 +30582,7 @@ "version": "0.0.5", "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.0.5.tgz", "integrity": "sha512-BI1rV+miEkaHj8zd2n+gaMgzu/fKz7BGlb4zZ6HAiY9adDmJMkaDcmuXlJFv0eyKUob+oszs3/2gdnXUrzx2Tg==", + "peer": true, "requires": {} }, "relay-runtime": { diff --git a/package.json b/package.json index 2d304b32..9758309a 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "@graphql-codegen/cli": "^4.0.1", "@graphql-codegen/fragment-matcher": "^5.0.0", "@graphql-codegen/typescript": "^4.0.1", - "@graphql-codegen/typescript-operations": "^4.0.1", + "@graphql-codegen/typescript-operations": "4.4.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "@graphql-codegen/typescript-resolvers": "^4.0.1", "dotenv": "^16.3.1", "inquirer": "^8.2.5", From 4187e587347f2604a0b6aa2c55ee057e46b5f25c Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 08:48:58 -0700 Subject: [PATCH 02/64] Enable masking --- client/src/types/api.ts | 1021 ++++++++++++++------------------------- codegen.ts | 4 + 2 files changed, 366 insertions(+), 659 deletions(-) diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 12873229..5e954132 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2369,7 +2369,7 @@ export type AlbumTile_album = { totalTracks: number; releaseDate: { __typename: 'ReleaseDate'; date: string }; images: Array<{ __typename: 'Image'; url: string }>; -}; +} & { ' $fragmentName'?: 'AlbumTile_album' }; export type AlbumTrackTitleCell_playbackState = { __typename: 'PlaybackState'; @@ -2378,9 +2378,11 @@ export type AlbumTrackTitleCell_playbackState = { | { __typename: 'Episode'; id: string; uri: string } | { __typename: 'Track'; id: string; uri: string } | null; -}; +} & { ' $fragmentName'?: 'AlbumTrackTitleCell_playbackState' }; -export type AlbumTrackTitleCell_album = { __typename: 'Album'; uri: string }; +export type AlbumTrackTitleCell_album = { __typename: 'Album'; uri: string } & { + ' $fragmentName'?: 'AlbumTrackTitleCell_album'; +}; export type AlbumTrackTitleCell_track = { __typename: 'Track'; @@ -2389,9 +2391,9 @@ export type AlbumTrackTitleCell_track = { uri: string; explicit: boolean; artists: Array<{ __typename: 'Artist'; id: string; name: string }>; -}; +} & { ' $fragmentName'?: 'AlbumTrackTitleCell_track' }; -export type AlbumTracksTable_album = { +export type AlbumTracksTable_album = ({ __typename: 'Album'; id: string; uri: string; @@ -2405,20 +2407,24 @@ export type AlbumTracksTable_album = { uri: string; durationMs: number; trackNumber: number | null; - name: string; - explicit: boolean; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; + artists: Array<{ __typename: 'Artist'; id: string }>; + } & { + ' $fragmentRefs'?: { + AlbumTrackTitleCell_track: AlbumTrackTitleCell_track; + }; }; }>; } | null; -}; +} & { + ' $fragmentRefs'?: { AlbumTrackTitleCell_album: AlbumTrackTitleCell_album }; +}) & { ' $fragmentName'?: 'AlbumTracksTable_album' }; export type ArtistTile_artist = { __typename: 'Artist'; id: string; name: string; images: Array<{ __typename: 'Image'; url: string }>; -}; +} & { ' $fragmentName'?: 'ArtistTile_artist' }; export type ArtistTopTracks_tracks = { __typename: 'Track'; @@ -2431,19 +2437,19 @@ export type ArtistTopTracks_tracks = { id: string; images: Array<{ __typename: 'Image'; url: string }>; }; -}; +} & { ' $fragmentName'?: 'ArtistTopTracks_tracks' }; type Avatar_profile_CurrentUserProfile_ = { __typename: 'CurrentUserProfile'; id: string; images: Array<{ __typename: 'Image'; url: string }> | null; -}; +} & { ' $fragmentName'?: 'Avatar_profile_CurrentUserProfile_' }; type Avatar_profile_User_ = { __typename: 'User'; id: string; images: Array<{ __typename: 'Image'; url: string }> | null; -}; +} & { ' $fragmentName'?: 'Avatar_profile_User_' }; export type Avatar_profile = | Avatar_profile_CurrentUserProfile_ @@ -2482,7 +2488,10 @@ export type CurrentUserQuery = { __typename: 'CurrentUserProfile'; id: string; displayName: string | null; - images: Array<{ __typename: 'Image'; url: string }> | null; + } & { + ' $fragmentRefs'?: { + Avatar_profile_CurrentUserProfile_: Avatar_profile_CurrentUserProfile_; + }; }; } | null; }; @@ -2491,14 +2500,14 @@ export type DevicePopover_playbackState = { __typename: 'PlaybackState'; isPlaying: boolean; device: { __typename: 'Device'; id: string | null }; -}; +} & { ' $fragmentName'?: 'DevicePopover_playbackState' }; export type DevicePopover_devices = { __typename: 'Device'; id: string | null; name: string; type: string; -}; +} & { ' $fragmentName'?: 'DevicePopover_devices' }; export type EpisodeDetailsCell_episode = { __typename: 'Episode'; @@ -2511,14 +2520,14 @@ export type EpisodeDetailsCell_episode = { publisher: string; images: Array<{ __typename: 'Image'; url: string }>; }; -}; +} & { ' $fragmentName'?: 'EpisodeDetailsCell_episode' }; export type EpisodePlaybackDetails_episode = { __typename: 'Episode'; id: string; name: string; show: { __typename: 'Show'; id: string; name: string }; -}; +} & { ' $fragmentName'?: 'EpisodePlaybackDetails_episode' }; export type EpisodeRemainingDuration_episode = { __typename: 'Episode'; @@ -2529,7 +2538,7 @@ export type EpisodeRemainingDuration_episode = { fullyPlayed: boolean; resumePositionMs: number; }; -}; +} & { ' $fragmentName'?: 'EpisodeRemainingDuration_episode' }; export type LikeControlQueryVariables = Exact<{ ids: Array | Scalars['ID']['input']; @@ -2543,9 +2552,14 @@ export type LikeControlQuery = { } | null; }; -type LikeControl_playbackItem_Episode_ = { __typename: 'Episode'; id: string }; +type LikeControl_playbackItem_Episode_ = { + __typename: 'Episode'; + id: string; +} & { ' $fragmentName'?: 'LikeControl_playbackItem_Episode_' }; -type LikeControl_playbackItem_Track_ = { __typename: 'Track'; id: string }; +type LikeControl_playbackItem_Track_ = { __typename: 'Track'; id: string } & { + ' $fragmentName'?: 'LikeControl_playbackItem_Track_'; +}; export type LikeControl_playbackItem = | LikeControl_playbackItem_Episode_ @@ -2555,7 +2569,7 @@ export type LikedSongsTile_playbackState = { __typename: 'PlaybackState'; isPlaying: boolean; context: { __typename: 'PlaybackContext'; uri: string } | null; -}; +} & { ' $fragmentName'?: 'LikedSongsTile_playbackState' }; export type LikedSongsTile_connection = { __typename: 'SavedTracksConnection'; @@ -2569,7 +2583,7 @@ export type LikedSongsTile_connection = { artists: Array<{ __typename: 'Artist'; id: string; name: string }>; }; }>; -}; +} & { ' $fragmentName'?: 'LikedSongsTile_connection' }; export type SidebarQueryVariables = Exact<{ offset?: InputMaybe; @@ -2593,10 +2607,11 @@ export type SidebarQuery = { node: { __typename: 'Playlist'; id: string; - uri: string; - name: string; images: Array<{ __typename: 'Image'; url: string }> | null; - owner: { __typename: 'User'; id: string; displayName: string | null }; + } & { + ' $fragmentRefs'?: { + PlaylistSidebarLink_playlist: PlaylistSidebarLink_playlist; + }; }; }>; } | null; @@ -2606,7 +2621,7 @@ export type SidebarQuery = { export type NotificationManager_playbackState = { __typename: 'PlaybackState'; device: { __typename: 'Device'; id: string | null }; -}; +} & { ' $fragmentName'?: 'NotificationManager_playbackState' }; export type PlaybackItemProgressBar_playbackState = { __typename: 'PlaybackState'; @@ -2617,21 +2632,15 @@ export type PlaybackItemProgressBar_playbackState = { | { __typename: 'Episode'; id: string; durationMs: number } | { __typename: 'Track'; id: string; durationMs: number } | null; -}; +} & { ' $fragmentName'?: 'PlaybackItemProgressBar_playbackState' }; -export type PlaybackStateFragment = { +export type PlaybackStateFragment = ({ __typename: 'PlaybackState'; isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; - progressMs: number | null; - timestamp: number; actions: { __typename: 'Actions'; disallows: Array }; - context: { - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } | null; + context: { __typename: 'PlaybackContext'; uri: string } | null; device: { __typename: 'Device'; id: string | null; @@ -2643,35 +2652,24 @@ export type PlaybackStateFragment = { | { __typename: 'Episode'; id: string; - durationMs: number; - name: string; show: { __typename: 'Show'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; } | { __typename: 'Track'; id: string; - durationMs: number; - name: string; - uri: string; album: { __typename: 'Album'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; } | null; +} & { ' $fragmentRefs'?: { Playbar_playbackState: Playbar_playbackState } }) & { + ' $fragmentName'?: 'PlaybackStateFragment'; }; export type PlaybackStateSubscriberQueryVariables = Exact<{ @@ -2683,60 +2681,11 @@ export type PlaybackStateSubscriberQuery = { __typename: 'CurrentUser'; player: { __typename: 'Player'; - playbackState: { - __typename: 'PlaybackState'; - isPlaying: boolean; - repeatState: RepeatMode; - shuffleState: boolean; - progressMs: number | null; - timestamp: number; - actions: { __typename: 'Actions'; disallows: Array }; - context: { - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } | null; - device: { - __typename: 'Device'; - id: string | null; - name: string; - type: string; - volumePercent: number; - }; - item: - | { - __typename: 'Episode'; - id: string; - durationMs: number; - name: string; - show: { - __typename: 'Show'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } - | { - __typename: 'Track'; - id: string; - durationMs: number; - name: string; - uri: string; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; - } - | null; - } | null; + playbackState: + | ({ __typename: 'PlaybackState' } & { + ' $fragmentRefs'?: { PlaybackStateFragment: PlaybackStateFragment }; + }) + | null; }; } | null; }; @@ -2746,60 +2695,11 @@ export type PlaybackStateSubscriberSubscriptionVariables = Exact<{ }>; export type PlaybackStateSubscriberSubscription = { - playbackStateChanged: { - __typename: 'PlaybackState'; - isPlaying: boolean; - repeatState: RepeatMode; - shuffleState: boolean; - progressMs: number | null; - timestamp: number; - actions: { __typename: 'Actions'; disallows: Array }; - context: { - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } | null; - device: { - __typename: 'Device'; - id: string | null; - name: string; - type: string; - volumePercent: number; - }; - item: - | { - __typename: 'Episode'; - id: string; - durationMs: number; - name: string; - show: { - __typename: 'Show'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } - | { - __typename: 'Track'; - id: string; - durationMs: number; - name: string; - uri: string; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; - } - | null; - } | null; + playbackStateChanged: + | ({ __typename: 'PlaybackState' } & { + ' $fragmentRefs'?: { PlaybackStateFragment: PlaybackStateFragment }; + }) + | null; }; export type PlaybarQueryVariables = Exact<{ [key: string]: never }>; @@ -2809,29 +2709,28 @@ export type PlaybarQuery = { __typename: 'CurrentUser'; player: { __typename: 'Player'; - devices: Array<{ - __typename: 'Device'; - id: string | null; - name: string; - type: string; - }> | null; + devices: Array< + { __typename: 'Device'; id: string | null } & { + ' $fragmentRefs'?: { DevicePopover_devices: DevicePopover_devices }; + } + > | null; }; } | null; }; -export type Playbar_playbackState = { +export type Playbar_playbackState = ({ __typename: 'PlaybackState'; isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; - progressMs: number | null; - timestamp: number; actions: { __typename: 'Actions'; disallows: Array }; - context: { - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } | null; + context: + | ({ __typename: 'PlaybackContext' } & { + ' $fragmentRefs'?: { + TrackPlaybackDetails_context: TrackPlaybackDetails_context; + }; + }) + | null; device: { __typename: 'Device'; id: string | null; @@ -2840,39 +2739,40 @@ export type Playbar_playbackState = { volumePercent: number; }; item: - | { + | ({ __typename: 'Episode'; id: string; - durationMs: number; - name: string; show: { __typename: 'Show'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } - | { + } & { + ' $fragmentRefs'?: { + EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; + LikeControl_playbackItem_Episode_: LikeControl_playbackItem_Episode_; + }; + }) + | ({ __typename: 'Track'; id: string; - durationMs: number; - name: string; - uri: string; album: { __typename: 'Album'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; - } + } & { + ' $fragmentRefs'?: { + TrackPlaybackDetails_track: TrackPlaybackDetails_track; + LikeControl_playbackItem_Track_: LikeControl_playbackItem_Track_; + }; + }) | null; -}; +} & { + ' $fragmentRefs'?: { + PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; + }; +}) & { ' $fragmentName'?: 'Playbar_playbackState' }; export type PlaylistDetailsModalQueryVariables = Exact<{ id: Scalars['ID']['input']; @@ -2892,12 +2792,12 @@ export type PlaylistSidebarLink_playbackState = { __typename: 'PlaybackState'; isPlaying: boolean; context: { __typename: 'PlaybackContext'; uri: string } | null; -}; +} & { ' $fragmentName'?: 'PlaylistSidebarLink_playbackState' }; export type PlaylistSidebarLink_currentUser = { __typename: 'CurrentUser'; profile: { __typename: 'CurrentUserProfile'; id: string }; -}; +} & { ' $fragmentName'?: 'PlaylistSidebarLink_currentUser' }; export type PlaylistSidebarLink_playlist = { __typename: 'Playlist'; @@ -2905,7 +2805,7 @@ export type PlaylistSidebarLink_playlist = { uri: string; name: string; owner: { __typename: 'User'; id: string; displayName: string | null }; -}; +} & { ' $fragmentName'?: 'PlaylistSidebarLink_playlist' }; export type PlaylistTile_playlist = { __typename: 'Playlist'; @@ -2914,7 +2814,7 @@ export type PlaylistTile_playlist = { description: string | null; uri: string; images: Array<{ __typename: 'Image'; url: string }> | null; -}; +} & { ' $fragmentName'?: 'PlaylistTile_playlist' }; export type PlaylistTitleCell_playbackState = { __typename: 'PlaybackState'; @@ -2923,13 +2823,13 @@ export type PlaylistTitleCell_playbackState = { | { __typename: 'Episode'; id: string; uri: string } | { __typename: 'Track'; id: string; uri: string } | null; -}; +} & { ' $fragmentName'?: 'PlaylistTitleCell_playbackState' }; export type PlaylistTitleCell_playlist = { __typename: 'Playlist'; id: string; uri: string; -}; +} & { ' $fragmentName'?: 'PlaylistTitleCell_playlist' }; type PlaylistTitleCell_playlistTrack_Episode_ = { __typename: 'Episode'; @@ -2943,7 +2843,7 @@ type PlaylistTitleCell_playlistTrack_Episode_ = { publisher: string; images: Array<{ __typename: 'Image'; url: string }>; }; -}; +} & { ' $fragmentName'?: 'PlaylistTitleCell_playlistTrack_Episode_' }; type PlaylistTitleCell_playlistTrack_Track_ = { __typename: 'Track'; @@ -2958,7 +2858,7 @@ type PlaylistTitleCell_playlistTrack_Track_ = { name: string; images: Array<{ __typename: 'Image'; url: string }>; }; -}; +} & { ' $fragmentName'?: 'PlaylistTitleCell_playlistTrack_Track_' }; export type PlaylistTitleCell_playlistTrack = | PlaylistTitleCell_playlistTrack_Episode_ @@ -2972,20 +2872,20 @@ export type TrackNumberCell_playbackState = { | { __typename: 'Episode'; id: string; uri: string } | { __typename: 'Track'; id: string; uri: string } | null; -}; +} & { ' $fragmentName'?: 'TrackNumberCell_playbackState' }; export type TrackNumberCell_track = { __typename: 'Track'; id: string; uri: string; trackNumber: number | null; -}; +} & { ' $fragmentName'?: 'TrackNumberCell_track' }; export type TrackPlaybackDetails_context = { __typename: 'PlaybackContext'; uri: string; type: PlaybackContextType; -}; +} & { ' $fragmentName'?: 'TrackPlaybackDetails_context' }; export type TrackPlaybackDetails_track = { __typename: 'Track'; @@ -2999,7 +2899,7 @@ export type TrackPlaybackDetails_track = { uri: string; name: string; }>; -}; +} & { ' $fragmentName'?: 'TrackPlaybackDetails_track' }; export type TrackTitleCell_playbackState = { __typename: 'PlaybackState'; @@ -3008,7 +2908,7 @@ export type TrackTitleCell_playbackState = { | { __typename: 'Episode'; id: string; uri: string } | { __typename: 'Track'; id: string; uri: string } | null; -}; +} & { ' $fragmentName'?: 'TrackTitleCell_playbackState' }; export type TrackTitleCell_track = { __typename: 'Track'; @@ -3022,7 +2922,7 @@ export type TrackTitleCell_track = { images: Array<{ __typename: 'Image'; url: string }>; }; artists: Array<{ __typename: 'Artist'; id: string; name: string }>; -}; +} & { ' $fragmentName'?: 'TrackTitleCell_track' }; export type YourEpisodesTile_connection = { __typename: 'SavedEpisodesConnection'; @@ -3036,7 +2936,7 @@ export type YourEpisodesTile_connection = { show: { __typename: 'Show'; id: string; name: string }; }; }>; -}; +} & { ' $fragmentName'?: 'YourEpisodesTile_connection' }; export type SavedTracksContainsQueryVariables = Exact<{ ids: Array | Scalars['ID']['input']; @@ -3052,7 +2952,7 @@ export type SavedTracksContainsQuery = { export type SavedTracksContainsFragment = { __typename: 'CurrentUser'; tracksContains: Array | null; -}; +} & { ' $fragmentName'?: 'SavedTracksContainsFragment' }; export type AddToPlaylistMutationVariables = Exact<{ input: AddItemsToPlaylistInput; @@ -3116,7 +3016,7 @@ export type RemoveSavedAlbumsMutation = { export type RemovedSavedAlbumsMutationFragment = { __typename: 'CurrentUser'; albumsContains: Array | null; -}; +} & { ' $fragmentName'?: 'RemovedSavedAlbumsMutationFragment' }; export type RemoveSavedTracksMutationVariables = Exact<{ input: RemoveSavedTracksInput; @@ -3132,7 +3032,7 @@ export type RemoveSavedTracksMutation = { export type RemovedSavedTracksMutationFragment = { __typename: 'CurrentUser'; tracksContains: Array | null; -}; +} & { ' $fragmentName'?: 'RemovedSavedTracksMutationFragment' }; export type ResetFieldConfigMutationVariables = Exact<{ input: ResetFieldConfigInput; @@ -3178,7 +3078,7 @@ export type UseResumePlaybackStateFragment = { uri: string; type: PlaybackContextType; } | null; -}; +} & { ' $fragmentName'?: 'UseResumePlaybackStateFragment' }; export type SaveAlbumsMutationVariables = Exact<{ input: SaveAlbumsInput; @@ -3194,7 +3094,7 @@ export type SaveAlbumsMutation = { export type SaveAlbumsMutationFragment = { __typename: 'CurrentUser'; albumsContains: Array | null; -}; +} & { ' $fragmentName'?: 'SaveAlbumsMutationFragment' }; export type SaveTracksMutationVariables = Exact<{ input: SaveTracksInput; @@ -3210,7 +3110,7 @@ export type SaveTracksMutation = { export type SaveTracksMutationFragment = { __typename: 'CurrentUser'; tracksContains: Array | null; -}; +} & { ' $fragmentName'?: 'SaveTracksMutationFragment' }; export type SeekToPositionMutationVariables = Exact<{ positionMs: Scalars['Int']['input']; @@ -3261,7 +3161,7 @@ export type SetVolumeMutation = { export type SetVolumeCacheFragment = { __typename: 'PlaybackState'; device: { __typename: 'Device'; id: string | null; volumePercent: number }; -}; +} & { ' $fragmentName'?: 'SetVolumeCacheFragment' }; export type ShufflePlaybackMutationVariables = Exact<{ state: Scalars['Boolean']['input']; @@ -3394,53 +3294,41 @@ export type AlbumRouteQuery = { __typename: 'CurrentUser'; albumsContains: Array | null; } | null; - album: { - __typename: 'Album'; - id: string; - albumType: AlbumType; - name: string; - totalTracks: number; - uri: string; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; - copyrights: Array<{ - __typename: 'Copyright'; - text: string; - type: CopyrightType | null; - }>; - images: Array<{ - __typename: 'Image'; - url: string; - vibrantColor: string | null; - }>; - releaseDate: { - __typename: 'ReleaseDate'; - date: string; - precision: ReleaseDatePrecision; - }; - tracks: { - __typename: 'AlbumTrackConnection'; - edges: Array<{ - __typename: 'AlbumTrackEdge'; - node: { - __typename: 'Track'; - id: string; - uri: string; - durationMs: number; - trackNumber: number | null; - name: string; - explicit: boolean; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; + album: + | ({ + __typename: 'Album'; + id: string; + albumType: AlbumType; + name: string; + totalTracks: number; + uri: string; + artists: Array<{ __typename: 'Artist'; id: string; name: string }>; + copyrights: Array<{ + __typename: 'Copyright'; + text: string; + type: CopyrightType | null; + }>; + images: Array<{ + __typename: 'Image'; + url: string; + vibrantColor: string | null; + }>; + releaseDate: { + __typename: 'ReleaseDate'; + date: string; + precision: ReleaseDatePrecision; }; - }>; - } | null; - } | null; + } & { + ' $fragmentRefs'?: { AlbumTracksTable_album: AlbumTracksTable_album }; + }) + | null; }; export type AlbumRoutePlaybackStateFragment = { __typename: 'PlaybackState'; isPlaying: boolean; context: { __typename: 'PlaybackContext'; uri: string } | null; -}; +} & { ' $fragmentName'?: 'AlbumRoutePlaybackStateFragment' }; export type ArtistRouteQueryVariables = Exact<{ artistId: Scalars['ID']['input']; @@ -3451,71 +3339,39 @@ export type ArtistRouteQuery = { __typename: 'Artist'; id: string; name: string; - albums: { - __typename: 'ArtistAlbumsConnection'; - edges: Array<{ - __typename: 'ArtistAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; - }; - }> | null; - } | null; - singles: { - __typename: 'ArtistAlbumsConnection'; - edges: Array<{ - __typename: 'ArtistAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; - }; - }> | null; - } | null; - appearsOn: { - __typename: 'ArtistAlbumsConnection'; - edges: Array<{ - __typename: 'ArtistAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; - }; - }> | null; - } | null; + albums: + | ({ __typename: 'ArtistAlbumsConnection' } & { + ' $fragmentRefs'?: { + ArtistRouteQuery_albums: ArtistRouteQuery_albums; + }; + }) + | null; + singles: + | ({ __typename: 'ArtistAlbumsConnection' } & { + ' $fragmentRefs'?: { + ArtistRouteQuery_albums: ArtistRouteQuery_albums; + }; + }) + | null; + appearsOn: + | ({ __typename: 'ArtistAlbumsConnection' } & { + ' $fragmentRefs'?: { + ArtistRouteQuery_albums: ArtistRouteQuery_albums; + }; + }) + | null; followers: { __typename: 'Followers'; total: number }; images: Array<{ __typename: 'Image'; url: string }>; - relatedArtists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }>; - topTracks: Array<{ - __typename: 'Track'; - id: string; - durationMs: number; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - }>; + relatedArtists: Array< + { __typename: 'Artist'; id: string } & { + ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; + } + >; + topTracks: Array< + { __typename: 'Track'; id: string } & { + ' $fragmentRefs'?: { ArtistTopTracks_tracks: ArtistTopTracks_tracks }; + } + >; } | null; }; @@ -3523,17 +3379,11 @@ export type ArtistRouteQuery_albums = { __typename: 'ArtistAlbumsConnection'; edges: Array<{ __typename: 'ArtistAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; + node: { __typename: 'Album'; id: string } & { + ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; }; }> | null; -}; +} & { ' $fragmentName'?: 'ArtistRouteQuery_albums' }; export type CollectionAlbumsRouteQueryVariables = Exact<{ offset?: InputMaybe; @@ -3553,14 +3403,8 @@ export type CollectionAlbumsRouteQuery = { }; edges: Array<{ __typename: 'SavedAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; + node: { __typename: 'Album'; id: string } & { + ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; }; }>; } | null; @@ -3582,11 +3426,8 @@ export type CollectionArtistsRouteQuery = { }; edges: Array<{ __typename: 'FollowedArtistEdge'; - node: { - __typename: 'Artist'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; + node: { __typename: 'Artist'; id: string } & { + ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; }; }>; } | null; @@ -3606,19 +3447,29 @@ export type CollectionPlaylistsRouteQuery = { __typename: 'SavedEpisodesConnection'; pageInfo: { __typename: 'PageInfo'; total: number }; } | null; - tracks: { - __typename: 'SavedTracksConnection'; - pageInfo: { __typename: 'PageInfo'; total: number }; - edges: Array<{ - __typename: 'SavedTrackEdge'; - node: { - __typename: 'Track'; - id: string; - name: string; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; - }; - }>; - } | null; + tracks: + | ({ + __typename: 'SavedTracksConnection'; + pageInfo: { __typename: 'PageInfo'; total: number }; + edges: Array<{ + __typename: 'SavedTrackEdge'; + node: { + __typename: 'Track'; + id: string; + name: string; + artists: Array<{ + __typename: 'Artist'; + id: string; + name: string; + }>; + }; + }>; + } & { + ' $fragmentRefs'?: { + LikedSongsTile_connection: LikedSongsTile_connection; + }; + }) + | null; playlists: { __typename: 'PlaylistConnection'; pageInfo: { @@ -3629,13 +3480,8 @@ export type CollectionPlaylistsRouteQuery = { }; edges: Array<{ __typename: 'PlaylistEdge'; - node: { - __typename: 'Playlist'; - id: string; - name: string; - description: string | null; - uri: string; - images: Array<{ __typename: 'Image'; url: string }> | null; + node: { __typename: 'Playlist'; id: string } & { + ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; } | null; @@ -3660,13 +3506,8 @@ export type CollectionPlaylistsRoutePaginatedQuery = { }; edges: Array<{ __typename: 'PlaylistEdge'; - node: { - __typename: 'Playlist'; - id: string; - name: string; - description: string | null; - uri: string; - images: Array<{ __typename: 'Image'; url: string }> | null; + node: { __typename: 'Playlist'; id: string } & { + ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; } | null; @@ -3681,19 +3522,13 @@ export type CollectionPodcastsRouteQueryVariables = Exact<{ export type CollectionPodcastsRouteQuery = { me: { __typename: 'CurrentUser'; - episodes: { - __typename: 'SavedEpisodesConnection'; - pageInfo: { __typename: 'PageInfo'; total: number }; - edges: Array<{ - __typename: 'SavedEpisodeEdge'; - node: { - __typename: 'Episode'; - id: string; - name: string; - show: { __typename: 'Show'; id: string; name: string }; - }; - }>; - } | null; + episodes: + | ({ __typename: 'SavedEpisodesConnection' } & { + ' $fragmentRefs'?: { + YourEpisodesTile_connection: YourEpisodesTile_connection; + }; + }) + | null; shows: { __typename: 'SavedShowsConnection'; pageInfo: { @@ -3776,15 +3611,12 @@ export type CollectionTracksRouteQuery = { id: string; name: string; durationMs: number; - uri: string; - trackNumber: number | null; - explicit: boolean; - album: { - __typename: 'Album'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; + album: { __typename: 'Album'; id: string }; + } & { + ' $fragmentRefs'?: { + TrackNumberCell_track: TrackNumberCell_track; + TrackTitleCell_track: TrackTitleCell_track; }; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; }; }>; } | null; @@ -3795,44 +3627,44 @@ export type CollectionTracksRoutePlaylistStateFragment = { __typename: 'PlaybackState'; isPlaying: boolean; context: { __typename: 'PlaybackContext'; uri: string } | null; -}; +} & { ' $fragmentName'?: 'CollectionTracksRoutePlaylistStateFragment' }; export type CurrentUserFragment = { __typename: 'CurrentUser'; tracksContains: Array | null; -}; +} & { ' $fragmentName'?: 'CurrentUserFragment' }; export type EpisodeRouteQueryVariables = Exact<{ episodeId: Scalars['ID']['input']; }>; export type EpisodeRouteQuery = { - episode: { - __typename: 'Episode'; - id: string; - name: string; - durationMs: number; - releaseDate: { - __typename: 'ReleaseDate'; - date: string; - precision: ReleaseDatePrecision; - }; - show: { - __typename: 'Show'; - id: string; - name: string; - images: Array<{ - __typename: 'Image'; - url: string; - vibrantColor: string | null; - }>; - }; - resumePoint: { - __typename: 'ResumePoint'; - fullyPlayed: boolean; - resumePositionMs: number; - }; - } | null; + episode: + | ({ + __typename: 'Episode'; + id: string; + name: string; + releaseDate: { + __typename: 'ReleaseDate'; + date: string; + precision: ReleaseDatePrecision; + }; + show: { + __typename: 'Show'; + id: string; + name: string; + images: Array<{ + __typename: 'Image'; + url: string; + vibrantColor: string | null; + }>; + }; + } & { + ' $fragmentRefs'?: { + EpisodeRemainingDuration_episode: EpisodeRemainingDuration_episode; + }; + }) + | null; }; export type IndexRouteQueryVariables = Exact<{ @@ -3845,13 +3677,8 @@ export type IndexRouteQuery = { message: string; edges: Array<{ __typename: 'FeaturedPlaylistEdge'; - node: { - __typename: 'Playlist'; - id: string; - name: string; - description: string | null; - uri: string; - images: Array<{ __typename: 'Image'; url: string }> | null; + node: { __typename: 'Playlist'; id: string } & { + ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; } | null; @@ -3867,80 +3694,76 @@ export type PlaylistQuery = { __typename: 'CurrentUser'; profile: { __typename: 'CurrentUserProfile'; id: string }; } | null; - playlist: { - __typename: 'Playlist'; - id: string; - name: string; - uri: string; - images: Array<{ - __typename: 'Image'; - url: string; - vibrantColor: string | null; - }> | null; - owner: { __typename: 'User'; id: string; displayName: string | null }; - tracks: { - __typename: 'PlaylistTrackConnection'; - edges: Array<{ - __typename: 'PlaylistTrackEdge'; - addedAt: string | null; - node: - | { - __typename: 'Episode'; - id: string; - name: string; - durationMs: number; - uri: string; - explicit: boolean; - releaseDate: { - __typename: 'ReleaseDate'; - date: string; - precision: ReleaseDatePrecision; - }; - show: { - __typename: 'Show'; - id: string; - name: string; - publisher: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } - | { - __typename: 'Track'; - id: string; - name: string; - durationMs: number; - uri: string; - trackNumber: number | null; - explicit: boolean; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - artists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - }>; - }; - }>; - pageInfo: { - __typename: 'PageInfo'; - hasNextPage: boolean; - offset: number; - limit: number; - total: number; - }; - }; - } | null; + playlist: + | ({ + __typename: 'Playlist'; + id: string; + name: string; + uri: string; + images: Array<{ + __typename: 'Image'; + url: string; + vibrantColor: string | null; + }> | null; + owner: { __typename: 'User'; id: string; displayName: string | null }; + tracks: { + __typename: 'PlaylistTrackConnection'; + edges: Array<{ + __typename: 'PlaylistTrackEdge'; + addedAt: string | null; + node: + | ({ + __typename: 'Episode'; + id: string; + name: string; + durationMs: number; + uri: string; + releaseDate: { + __typename: 'ReleaseDate'; + date: string; + precision: ReleaseDatePrecision; + }; + show: { __typename: 'Show'; id: string; name: string }; + } & { + ' $fragmentRefs'?: { + PlaylistTitleCell_playlistTrack_Episode_: PlaylistTitleCell_playlistTrack_Episode_; + }; + }) + | ({ + __typename: 'Track'; + id: string; + name: string; + durationMs: number; + uri: string; + album: { __typename: 'Album'; id: string; name: string }; + } & { + ' $fragmentRefs'?: { + TrackNumberCell_track: TrackNumberCell_track; + PlaylistTitleCell_playlistTrack_Track_: PlaylistTitleCell_playlistTrack_Track_; + }; + }); + }>; + pageInfo: { + __typename: 'PageInfo'; + hasNextPage: boolean; + offset: number; + limit: number; + total: number; + }; + }; + } & { + ' $fragmentRefs'?: { + PlaylistTitleCell_playlist: PlaylistTitleCell_playlist; + }; + }) + | null; }; export type PlaylistRoutePlaybackStateFragment = { __typename: 'PlaybackState'; isPlaying: boolean; context: { __typename: 'PlaybackContext'; uri: string } | null; -}; +} & { ' $fragmentName'?: 'PlaylistRoutePlaybackStateFragment' }; export type QueueRouteQueryVariables = Exact<{ [key: string]: never }>; @@ -3952,116 +3775,56 @@ export type QueueRouteQuery = { playbackQueue: { __typename: 'PlaybackQueue'; currentlyPlaying: - | { - __typename: 'Episode'; - id: string; - durationMs: number; - uri: string; - explicit: boolean; - name: string; - show: { - __typename: 'Show'; - id: string; - name: string; - publisher: string; - images: Array<{ __typename: 'Image'; url: string }>; + | ({ __typename: 'Episode' } & { + ' $fragmentRefs'?: { + QueueRoute_playbackItem_Episode_: QueueRoute_playbackItem_Episode_; }; - } - | { - __typename: 'Track'; - id: string; - durationMs: number; - uri: string; - trackNumber: number | null; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; + }) + | ({ __typename: 'Track' } & { + ' $fragmentRefs'?: { + QueueRoute_playbackItem_Track_: QueueRoute_playbackItem_Track_; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - }>; - } + }) | null; queue: Array< - | { - __typename: 'Episode'; - id: string; - durationMs: number; - uri: string; - explicit: boolean; - name: string; - show: { - __typename: 'Show'; - id: string; - name: string; - publisher: string; - images: Array<{ __typename: 'Image'; url: string }>; + | ({ __typename: 'Episode' } & { + ' $fragmentRefs'?: { + QueueRoute_playbackItem_Episode_: QueueRoute_playbackItem_Episode_; }; - } - | { - __typename: 'Track'; - id: string; - durationMs: number; - uri: string; - trackNumber: number | null; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; + }) + | ({ __typename: 'Track' } & { + ' $fragmentRefs'?: { + QueueRoute_playbackItem_Track_: QueueRoute_playbackItem_Track_; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - }>; - } + }) >; } | null; }; } | null; }; -type QueueRoute_playbackItem_Episode_ = { +type QueueRoute_playbackItem_Episode_ = ({ __typename: 'Episode'; id: string; durationMs: number; uri: string; - explicit: boolean; - name: string; - show: { - __typename: 'Show'; - id: string; - name: string; - publisher: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; -}; + show: { __typename: 'Show'; id: string; name: string }; +} & { + ' $fragmentRefs'?: { EpisodeDetailsCell_episode: EpisodeDetailsCell_episode }; +}) & { ' $fragmentName'?: 'QueueRoute_playbackItem_Episode_' }; -type QueueRoute_playbackItem_Track_ = { +type QueueRoute_playbackItem_Track_ = ({ __typename: 'Track'; id: string; durationMs: number; uri: string; - trackNumber: number | null; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; + album: { __typename: 'Album'; id: string; name: string }; +} & { + ' $fragmentRefs'?: { + TrackNumberCell_track: TrackNumberCell_track; + TrackTitleCell_track: TrackTitleCell_track; }; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; -}; +}) & { ' $fragmentName'?: 'QueueRoute_playbackItem_Track_' }; export type QueueRoute_playbackItem = | QueueRoute_playbackItem_Episode_ @@ -4075,7 +3838,7 @@ export type QueueRoute_playbackState = { | { __typename: 'Episode'; id: string } | { __typename: 'Track'; id: string } | null; -}; +} & { ' $fragmentName'?: 'QueueRoute_playbackState' }; export type SearchRouteQueryVariables = Exact<{ q: Scalars['String']['input']; @@ -4089,11 +3852,8 @@ export type SearchRouteQuery = { __typename: 'SearchArtistsConnection'; edges: Array<{ __typename: 'SearchArtistEdge'; - node: { - __typename: 'Artist'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; + node: { __typename: 'Artist'; id: string } & { + ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; }; }>; } | null; @@ -4133,45 +3893,8 @@ export type LimitedIntrospectionQuery = { __typename: '__Field'; name: string; description: string | null; - type: { - __typename: '__Type'; - kind: __TypeKind; - name: string | null; - ofType: { - __typename: '__Type'; - kind: __TypeKind; - name: string | null; - ofType: { - __typename: '__Type'; - kind: __TypeKind; - name: string | null; - ofType: { - __typename: '__Type'; - kind: __TypeKind; - name: string | null; - ofType: { - __typename: '__Type'; - kind: __TypeKind; - name: string | null; - ofType: { - __typename: '__Type'; - kind: __TypeKind; - name: string | null; - ofType: { - __typename: '__Type'; - kind: __TypeKind; - name: string | null; - ofType: { - __typename: '__Type'; - kind: __TypeKind; - name: string | null; - } | null; - } | null; - } | null; - } | null; - } | null; - } | null; - } | null; + type: { __typename: '__Type' } & { + ' $fragmentRefs'?: { TypeRef: TypeRef }; }; }> | null; }>; @@ -4217,7 +3940,7 @@ export type TypeRef = { } | null; } | null; } | null; -}; +} & { ' $fragmentName'?: 'TypeRef' }; export type ShowRouteQueryVariables = Exact<{ showId: Scalars['ID']['input']; @@ -4245,10 +3968,9 @@ export type ShowRouteQuery = { date: string; precision: ReleaseDatePrecision; }; - resumePoint: { - __typename: 'ResumePoint'; - fullyPlayed: boolean; - resumePositionMs: number; + } & { + ' $fragmentRefs'?: { + EpisodeRemainingDuration_episode: EpisodeRemainingDuration_episode; }; }; }>; @@ -4268,7 +3990,7 @@ export type ShowRoute_playbackState = { | { __typename: 'Episode'; id: string; uri: string } | { __typename: 'Track'; id: string; uri: string } | null; -}; +} & { ' $fragmentName'?: 'ShowRoute_playbackState' }; export type TrackRouteQueryVariables = Exact<{ trackId: Scalars['ID']['input']; @@ -4285,46 +4007,27 @@ export type TrackRouteQuery = { id: string; albumType: AlbumType; name: string; - uri: string; images: Array<{ __typename: 'Image'; url: string; vibrantColor: string | null; }>; - tracks: { - __typename: 'AlbumTrackConnection'; - edges: Array<{ - __typename: 'AlbumTrackEdge'; - node: { - __typename: 'Track'; - id: string; - uri: string; - durationMs: number; - trackNumber: number | null; - name: string; - explicit: boolean; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; - }; - }>; - } | null; + } & { + ' $fragmentRefs'?: { AlbumTracksTable_album: AlbumTracksTable_album }; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - topTracks: Array<{ - __typename: 'Track'; + artists: Array< + { + __typename: 'Artist'; id: string; - durationMs: number; - explicit: boolean; name: string; - album: { - __typename: 'Album'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - }>; - images: Array<{ __typename: 'Image'; url: string }>; - }>; + topTracks: Array< + { __typename: 'Track'; id: string } & { + ' $fragmentRefs'?: { + ArtistTopTracks_tracks: ArtistTopTracks_tracks; + }; + } + >; + } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } } + >; } | null; }; diff --git a/codegen.ts b/codegen.ts index 440a7c72..6fa3e124 100644 --- a/codegen.ts +++ b/codegen.ts @@ -377,6 +377,10 @@ const config: CodegenConfig = { namingConvention: { typeNames: 'keep', }, + inlineFragmentTypes: 'mask', + customDirectives: { + apolloUnmask: true, + }, }, plugins: ['typescript', 'typescript-operations'], }, From 68728b6c8fe5db39adf7ee8385b119dae98f9a7e Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 09:00:29 -0700 Subject: [PATCH 03/64] Use alpha of typescript codegen --- package-lock.json | 191 +++++++++++++++++++++++++++++++++------------- package.json | 2 +- 2 files changed, 139 insertions(+), 54 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8428239f..e9d54b21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@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", + "@graphql-codegen/typescript": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "@graphql-codegen/typescript-operations": "4.4.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "@graphql-codegen/typescript-resolvers": "^4.0.1", "dotenv": "^16.3.1", @@ -2507,15 +2507,18 @@ } }, "node_modules/@graphql-codegen/typescript": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.0.1.tgz", - "integrity": "sha512-3YziQ21dCVdnHb+Us1uDb3pA6eG5Chjv0uTK+bt9dXeMlwYBU8MbtzvQTo4qvzWVC1AxSOKj0rgfNu1xCXqJyA==", + "version": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-jWnMVzGWC6nNc1C+ZW8bTB5okH1j2YX6qvWmEgEsFO4i7Vob7A2pgZbaOCpQRsmBdfmAdYw3X2Jz2QwhiU6wsg==", "dependencies": { - "@graphql-codegen/plugin-helpers": "^5.0.0", - "@graphql-codegen/schema-ast": "^4.0.0", - "@graphql-codegen/visitor-plugin-common": "4.0.1", + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-codegen/schema-ast": "^4.0.2", + "@graphql-codegen/visitor-plugin-common": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "auto-bind": "~4.0.0", - "tslib": "~2.5.0" + "tslib": "~2.6.0" + }, + "engines": { + "node": ">=16" }, "peerDependencies": { "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" @@ -2539,24 +2542,6 @@ "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, - "node_modules/@graphql-codegen/typescript-operations/node_modules/@graphql-codegen/typescript": { - "version": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", - "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", - "integrity": "sha512-jWnMVzGWC6nNc1C+ZW8bTB5okH1j2YX6qvWmEgEsFO4i7Vob7A2pgZbaOCpQRsmBdfmAdYw3X2Jz2QwhiU6wsg==", - "dependencies": { - "@graphql-codegen/plugin-helpers": "^5.1.0", - "@graphql-codegen/schema-ast": "^4.0.2", - "@graphql-codegen/visitor-plugin-common": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", - "auto-bind": "~4.0.0", - "tslib": "~2.6.0" - }, - "engines": { - "node": ">=16" - }, - "peerDependencies": { - "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" - } - }, "node_modules/@graphql-codegen/typescript-operations/node_modules/@graphql-codegen/visitor-plugin-common": { "version": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", @@ -2596,15 +2581,79 @@ "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, + "node_modules/@graphql-codegen/typescript-resolvers/node_modules/@graphql-codegen/typescript": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.1.tgz", + "integrity": "sha512-+o5LOT71K9hdO4lDVnRGkkET5RdlKvxlQGug8dZgRGrhE2/xoPBsKfLhg9AoJGYMauNZxKj3blABQxHOKEku6Q==", + "dependencies": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-codegen/schema-ast": "^4.0.2", + "@graphql-codegen/visitor-plugin-common": "5.5.0", + "auto-bind": "~4.0.0", + "tslib": "~2.6.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "graphql": "^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" + } + }, + "node_modules/@graphql-codegen/typescript-resolvers/node_modules/@graphql-codegen/typescript/node_modules/@graphql-codegen/visitor-plugin-common": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.5.0.tgz", + "integrity": "sha512-FSkxe/o4qKbpK+ipIT/jxZLYH0+3+XdIrJWsKlCW9wwJMF9mEJLJtzZNcxHSjz7+Eny6SUElAT2dqZ5XByxkog==", + "dependencies": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-tools/optimize": "^2.0.0", + "@graphql-tools/relay-operation-optimizer": "^7.0.0", + "@graphql-tools/utils": "^10.0.0", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.15", + "dependency-graph": "^0.11.0", + "graphql-tag": "^2.11.0", + "parse-filepath": "^1.0.2", + "tslib": "~2.6.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" + } + }, + "node_modules/@graphql-codegen/typescript-resolvers/node_modules/@graphql-codegen/typescript/node_modules/tslib": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" + }, "node_modules/@graphql-codegen/typescript-resolvers/node_modules/tslib": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" }, - "node_modules/@graphql-codegen/typescript/node_modules/tslib": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", - "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" + "node_modules/@graphql-codegen/typescript/node_modules/@graphql-codegen/visitor-plugin-common": { + "version": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-BBEecMNqAerwLdNeiwGTY6kpyVTpWrYM5AvIGPBbYTbEQugIOxH96QFazsu+2Xn9wnHuLhevBXRMyk7OKSbNCQ==", + "dependencies": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-tools/optimize": "^2.0.0", + "@graphql-tools/relay-operation-optimizer": "^7.0.0", + "@graphql-tools/utils": "^10.0.0", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.15", + "dependency-graph": "^0.11.0", + "graphql-tag": "^2.11.0", + "parse-filepath": "^1.0.2", + "tslib": "~2.6.0" + }, + "engines": { + "node": ">=16" + }, + "peerDependencies": { + "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" + } }, "node_modules/@graphql-codegen/visitor-plugin-common": { "version": "4.0.1", @@ -20767,21 +20816,33 @@ } }, "@graphql-codegen/typescript": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.0.1.tgz", - "integrity": "sha512-3YziQ21dCVdnHb+Us1uDb3pA6eG5Chjv0uTK+bt9dXeMlwYBU8MbtzvQTo4qvzWVC1AxSOKj0rgfNu1xCXqJyA==", + "version": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-jWnMVzGWC6nNc1C+ZW8bTB5okH1j2YX6qvWmEgEsFO4i7Vob7A2pgZbaOCpQRsmBdfmAdYw3X2Jz2QwhiU6wsg==", "requires": { - "@graphql-codegen/plugin-helpers": "^5.0.0", - "@graphql-codegen/schema-ast": "^4.0.0", - "@graphql-codegen/visitor-plugin-common": "4.0.1", + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-codegen/schema-ast": "^4.0.2", + "@graphql-codegen/visitor-plugin-common": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "auto-bind": "~4.0.0", - "tslib": "~2.5.0" + "tslib": "~2.6.0" }, "dependencies": { - "tslib": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", - "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==" + "@graphql-codegen/visitor-plugin-common": { + "version": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", + "integrity": "sha512-BBEecMNqAerwLdNeiwGTY6kpyVTpWrYM5AvIGPBbYTbEQugIOxH96QFazsu+2Xn9wnHuLhevBXRMyk7OKSbNCQ==", + "requires": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-tools/optimize": "^2.0.0", + "@graphql-tools/relay-operation-optimizer": "^7.0.0", + "@graphql-tools/utils": "^10.0.0", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.15", + "dependency-graph": "^0.11.0", + "graphql-tag": "^2.11.0", + "parse-filepath": "^1.0.2", + "tslib": "~2.6.0" + } } } }, @@ -20797,18 +20858,6 @@ "tslib": "~2.6.0" }, "dependencies": { - "@graphql-codegen/typescript": { - "version": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", - "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", - "integrity": "sha512-jWnMVzGWC6nNc1C+ZW8bTB5okH1j2YX6qvWmEgEsFO4i7Vob7A2pgZbaOCpQRsmBdfmAdYw3X2Jz2QwhiU6wsg==", - "requires": { - "@graphql-codegen/plugin-helpers": "^5.1.0", - "@graphql-codegen/schema-ast": "^4.0.2", - "@graphql-codegen/visitor-plugin-common": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", - "auto-bind": "~4.0.0", - "tslib": "~2.6.0" - } - }, "@graphql-codegen/visitor-plugin-common": { "version": "5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.6.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76.tgz", @@ -20841,6 +20890,42 @@ "tslib": "~2.5.0" }, "dependencies": { + "@graphql-codegen/typescript": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@graphql-codegen/typescript/-/typescript-4.1.1.tgz", + "integrity": "sha512-+o5LOT71K9hdO4lDVnRGkkET5RdlKvxlQGug8dZgRGrhE2/xoPBsKfLhg9AoJGYMauNZxKj3blABQxHOKEku6Q==", + "requires": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-codegen/schema-ast": "^4.0.2", + "@graphql-codegen/visitor-plugin-common": "5.5.0", + "auto-bind": "~4.0.0", + "tslib": "~2.6.0" + }, + "dependencies": { + "@graphql-codegen/visitor-plugin-common": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-5.5.0.tgz", + "integrity": "sha512-FSkxe/o4qKbpK+ipIT/jxZLYH0+3+XdIrJWsKlCW9wwJMF9mEJLJtzZNcxHSjz7+Eny6SUElAT2dqZ5XByxkog==", + "requires": { + "@graphql-codegen/plugin-helpers": "^5.1.0", + "@graphql-tools/optimize": "^2.0.0", + "@graphql-tools/relay-operation-optimizer": "^7.0.0", + "@graphql-tools/utils": "^10.0.0", + "auto-bind": "~4.0.0", + "change-case-all": "1.0.15", + "dependency-graph": "^0.11.0", + "graphql-tag": "^2.11.0", + "parse-filepath": "^1.0.2", + "tslib": "~2.6.0" + } + }, + "tslib": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" + } + } + }, "tslib": { "version": "2.5.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz", diff --git a/package.json b/package.json index 9758309a..5c4a6b0b 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "@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", + "@graphql-codegen/typescript": "4.1.2-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "@graphql-codegen/typescript-operations": "4.4.0-rc-20241113152831-5d3ee419471c024e41137b971f5dad2d4344bc76", "@graphql-codegen/typescript-resolvers": "^4.0.1", "dotenv": "^16.3.1", From 81b32fe44f541e42f4230010231e09aac08b2726 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 09:01:32 -0700 Subject: [PATCH 04/64] Rerun codegen --- client/src/types/api.ts | 66 ++++++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 5e954132..894cdaef 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2439,21 +2439,21 @@ export type ArtistTopTracks_tracks = { }; } & { ' $fragmentName'?: 'ArtistTopTracks_tracks' }; -type Avatar_profile_CurrentUserProfile_ = { +type Avatar_profile_CurrentUserProfile = { __typename: 'CurrentUserProfile'; id: string; images: Array<{ __typename: 'Image'; url: string }> | null; -} & { ' $fragmentName'?: 'Avatar_profile_CurrentUserProfile_' }; +} & { ' $fragmentName'?: 'Avatar_profile_CurrentUserProfile' }; -type Avatar_profile_User_ = { +type Avatar_profile_User = { __typename: 'User'; id: string; images: Array<{ __typename: 'Image'; url: string }> | null; -} & { ' $fragmentName'?: 'Avatar_profile_User_' }; +} & { ' $fragmentName'?: 'Avatar_profile_User' }; export type Avatar_profile = - | Avatar_profile_CurrentUserProfile_ - | Avatar_profile_User_; + | Avatar_profile_CurrentUserProfile + | Avatar_profile_User; export type AddToPlaylistQueryVariables = Exact<{ offset?: InputMaybe; @@ -2490,7 +2490,7 @@ export type CurrentUserQuery = { displayName: string | null; } & { ' $fragmentRefs'?: { - Avatar_profile_CurrentUserProfile_: Avatar_profile_CurrentUserProfile_; + Avatar_profile_CurrentUserProfile: Avatar_profile_CurrentUserProfile; }; }; } | null; @@ -2552,18 +2552,18 @@ export type LikeControlQuery = { } | null; }; -type LikeControl_playbackItem_Episode_ = { +type LikeControl_playbackItem_Episode = { __typename: 'Episode'; id: string; -} & { ' $fragmentName'?: 'LikeControl_playbackItem_Episode_' }; +} & { ' $fragmentName'?: 'LikeControl_playbackItem_Episode' }; -type LikeControl_playbackItem_Track_ = { __typename: 'Track'; id: string } & { - ' $fragmentName'?: 'LikeControl_playbackItem_Track_'; +type LikeControl_playbackItem_Track = { __typename: 'Track'; id: string } & { + ' $fragmentName'?: 'LikeControl_playbackItem_Track'; }; export type LikeControl_playbackItem = - | LikeControl_playbackItem_Episode_ - | LikeControl_playbackItem_Track_; + | LikeControl_playbackItem_Episode + | LikeControl_playbackItem_Track; export type LikedSongsTile_playbackState = { __typename: 'PlaybackState'; @@ -2750,7 +2750,7 @@ export type Playbar_playbackState = ({ } & { ' $fragmentRefs'?: { EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; - LikeControl_playbackItem_Episode_: LikeControl_playbackItem_Episode_; + LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; }; }) | ({ @@ -2764,7 +2764,7 @@ export type Playbar_playbackState = ({ } & { ' $fragmentRefs'?: { TrackPlaybackDetails_track: TrackPlaybackDetails_track; - LikeControl_playbackItem_Track_: LikeControl_playbackItem_Track_; + LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; }; }) | null; @@ -2831,7 +2831,7 @@ export type PlaylistTitleCell_playlist = { uri: string; } & { ' $fragmentName'?: 'PlaylistTitleCell_playlist' }; -type PlaylistTitleCell_playlistTrack_Episode_ = { +type PlaylistTitleCell_playlistTrack_Episode = { __typename: 'Episode'; explicit: boolean; id: string; @@ -2843,9 +2843,9 @@ type PlaylistTitleCell_playlistTrack_Episode_ = { publisher: string; images: Array<{ __typename: 'Image'; url: string }>; }; -} & { ' $fragmentName'?: 'PlaylistTitleCell_playlistTrack_Episode_' }; +} & { ' $fragmentName'?: 'PlaylistTitleCell_playlistTrack_Episode' }; -type PlaylistTitleCell_playlistTrack_Track_ = { +type PlaylistTitleCell_playlistTrack_Track = { __typename: 'Track'; explicit: boolean; id: string; @@ -2858,11 +2858,11 @@ type PlaylistTitleCell_playlistTrack_Track_ = { name: string; images: Array<{ __typename: 'Image'; url: string }>; }; -} & { ' $fragmentName'?: 'PlaylistTitleCell_playlistTrack_Track_' }; +} & { ' $fragmentName'?: 'PlaylistTitleCell_playlistTrack_Track' }; export type PlaylistTitleCell_playlistTrack = - | PlaylistTitleCell_playlistTrack_Episode_ - | PlaylistTitleCell_playlistTrack_Track_; + | PlaylistTitleCell_playlistTrack_Episode + | PlaylistTitleCell_playlistTrack_Track; export type TrackNumberCell_playbackState = { __typename: 'PlaybackState'; @@ -3726,7 +3726,7 @@ export type PlaylistQuery = { show: { __typename: 'Show'; id: string; name: string }; } & { ' $fragmentRefs'?: { - PlaylistTitleCell_playlistTrack_Episode_: PlaylistTitleCell_playlistTrack_Episode_; + PlaylistTitleCell_playlistTrack_Episode: PlaylistTitleCell_playlistTrack_Episode; }; }) | ({ @@ -3739,7 +3739,7 @@ export type PlaylistQuery = { } & { ' $fragmentRefs'?: { TrackNumberCell_track: TrackNumberCell_track; - PlaylistTitleCell_playlistTrack_Track_: PlaylistTitleCell_playlistTrack_Track_; + PlaylistTitleCell_playlistTrack_Track: PlaylistTitleCell_playlistTrack_Track; }; }); }>; @@ -3777,24 +3777,24 @@ export type QueueRouteQuery = { currentlyPlaying: | ({ __typename: 'Episode' } & { ' $fragmentRefs'?: { - QueueRoute_playbackItem_Episode_: QueueRoute_playbackItem_Episode_; + QueueRoute_playbackItem_Episode: QueueRoute_playbackItem_Episode; }; }) | ({ __typename: 'Track' } & { ' $fragmentRefs'?: { - QueueRoute_playbackItem_Track_: QueueRoute_playbackItem_Track_; + QueueRoute_playbackItem_Track: QueueRoute_playbackItem_Track; }; }) | null; queue: Array< | ({ __typename: 'Episode' } & { ' $fragmentRefs'?: { - QueueRoute_playbackItem_Episode_: QueueRoute_playbackItem_Episode_; + QueueRoute_playbackItem_Episode: QueueRoute_playbackItem_Episode; }; }) | ({ __typename: 'Track' } & { ' $fragmentRefs'?: { - QueueRoute_playbackItem_Track_: QueueRoute_playbackItem_Track_; + QueueRoute_playbackItem_Track: QueueRoute_playbackItem_Track; }; }) >; @@ -3803,7 +3803,7 @@ export type QueueRouteQuery = { } | null; }; -type QueueRoute_playbackItem_Episode_ = ({ +type QueueRoute_playbackItem_Episode = ({ __typename: 'Episode'; id: string; durationMs: number; @@ -3811,9 +3811,9 @@ type QueueRoute_playbackItem_Episode_ = ({ show: { __typename: 'Show'; id: string; name: string }; } & { ' $fragmentRefs'?: { EpisodeDetailsCell_episode: EpisodeDetailsCell_episode }; -}) & { ' $fragmentName'?: 'QueueRoute_playbackItem_Episode_' }; +}) & { ' $fragmentName'?: 'QueueRoute_playbackItem_Episode' }; -type QueueRoute_playbackItem_Track_ = ({ +type QueueRoute_playbackItem_Track = ({ __typename: 'Track'; id: string; durationMs: number; @@ -3824,11 +3824,11 @@ type QueueRoute_playbackItem_Track_ = ({ TrackNumberCell_track: TrackNumberCell_track; TrackTitleCell_track: TrackTitleCell_track; }; -}) & { ' $fragmentName'?: 'QueueRoute_playbackItem_Track_' }; +}) & { ' $fragmentName'?: 'QueueRoute_playbackItem_Track' }; export type QueueRoute_playbackItem = - | QueueRoute_playbackItem_Episode_ - | QueueRoute_playbackItem_Track_; + | QueueRoute_playbackItem_Episode + | QueueRoute_playbackItem_Track; export type QueueRoute_playbackState = { __typename: 'PlaybackState'; From fc7bc5594d61ba0c07073a2e84ec27d24df02103 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 12:14:07 -0700 Subject: [PATCH 05/64] Use release candidate of apollo --- client/package.json | 2 +- package-lock.json | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/client/package.json b/client/package.json index b8c2c818..416243de 100644 --- a/client/package.json +++ b/client/package.json @@ -6,7 +6,7 @@ "node": ">=18" }, "dependencies": { - "@apollo/client": "^3.12.0-alpha.0", + "@apollo/client": "^3.12.0-rc.0", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", diff --git a/package-lock.json b/package-lock.json index e9d54b21..894c0d6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "client": { "version": "0.1.0", "dependencies": { - "@apollo/client": "^3.12.0-alpha.0", + "@apollo/client": "^3.12.0-rc.0", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", @@ -109,9 +109,9 @@ } }, "client/node_modules/@apollo/client": { - "version": "3.12.0-alpha.0", - "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-alpha.0.tgz", - "integrity": "sha512-gRgkKnfn+Za9T3NjkQxy19ujGdNzAasSMl6kH0WuslUFHDB2xIbZc/IvLUguwVv53jMwTD+rhTsYzy/50WsyDg==", + "version": "3.12.0-rc.0", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-rc.0.tgz", + "integrity": "sha512-pn7WXU6af8MUI+/RvOAr3k1R0MkmVDyRRaHn+Hm/SYRrMCjp793Ho/+UMk0AaTWTdGikwJlg2Ayx0IYCYejJXQ==", "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", @@ -24867,7 +24867,7 @@ "client": { "version": "file:client", "requires": { - "@apollo/client": "^3.12.0-alpha.0", + "@apollo/client": "^3.12.0-rc.0", "@apollo/persisted-query-lists": "^1.0.0", "@apollo/rover": "^0.16.2", "@mdx-js/rollup": "^2.3.0", @@ -24924,9 +24924,9 @@ }, "dependencies": { "@apollo/client": { - "version": "3.12.0-alpha.0", - "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-alpha.0.tgz", - "integrity": "sha512-gRgkKnfn+Za9T3NjkQxy19ujGdNzAasSMl6kH0WuslUFHDB2xIbZc/IvLUguwVv53jMwTD+rhTsYzy/50WsyDg==", + "version": "3.12.0-rc.0", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-rc.0.tgz", + "integrity": "sha512-pn7WXU6af8MUI+/RvOAr3k1R0MkmVDyRRaHn+Hm/SYRrMCjp793Ho/+UMk0AaTWTdGikwJlg2Ayx0IYCYejJXQ==", "requires": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", From 4690a0bdd94237d9ef5ff3a132187827c532b938 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:06:50 -0700 Subject: [PATCH 06/64] Run codemod to apply unmask --- client/src/components/AlbumTracksTable.tsx | 4 ++-- client/src/components/CurrentUserMenu.tsx | 2 +- client/src/components/LoggedInLayout.tsx | 2 +- client/src/components/PlaybackStateSubscriber.tsx | 6 +++--- client/src/components/Playbar.tsx | 12 ++++++------ client/src/routes/albums/album.tsx | 2 +- client/src/routes/artists/artist.tsx | 12 ++++++------ client/src/routes/collection/albums.tsx | 2 +- client/src/routes/collection/artists.tsx | 2 +- client/src/routes/collection/playlists.tsx | 6 +++--- client/src/routes/collection/podcasts.tsx | 2 +- client/src/routes/collection/tracks.tsx | 4 ++-- client/src/routes/episodes/episode.tsx | 2 +- client/src/routes/index.tsx | 2 +- client/src/routes/playlists/playlist.tsx | 6 +++--- client/src/routes/queue.tsx | 10 +++++----- client/src/routes/search/query.tsx | 2 +- client/src/routes/settings.tsx | 2 +- client/src/routes/shows/show.tsx | 2 +- client/src/routes/tracks/track.tsx | 6 +++--- 20 files changed, 44 insertions(+), 44 deletions(-) diff --git a/client/src/components/AlbumTracksTable.tsx b/client/src/components/AlbumTracksTable.tsx index a3042c78..60552fed 100644 --- a/client/src/components/AlbumTracksTable.tsx +++ b/client/src/components/AlbumTracksTable.tsx @@ -40,12 +40,12 @@ fragmentRegistry.register(gql` id } - ...AlbumTrackTitleCell_track + ...AlbumTrackTitleCell_track @unmask(mode: "migrate") } } } - ...AlbumTrackTitleCell_album + ...AlbumTrackTitleCell_album @unmask(mode: "migrate") } `); diff --git a/client/src/components/CurrentUserMenu.tsx b/client/src/components/CurrentUserMenu.tsx index 26edadcd..170ac83d 100644 --- a/client/src/components/CurrentUserMenu.tsx +++ b/client/src/components/CurrentUserMenu.tsx @@ -13,7 +13,7 @@ const CURRENT_USER_QUERY: TypedDocumentNode< profile { id displayName - ...Avatar_profile + ...Avatar_profile @unmask(mode: "migrate") } } } diff --git a/client/src/components/LoggedInLayout.tsx b/client/src/components/LoggedInLayout.tsx index 9852ff36..81f0de13 100644 --- a/client/src/components/LoggedInLayout.tsx +++ b/client/src/components/LoggedInLayout.tsx @@ -102,7 +102,7 @@ const SIDEBAR_QUERY: TypedDocumentNode< images { url } - ...PlaylistSidebarLink_playlist + ...PlaylistSidebarLink_playlist @unmask(mode: "migrate") } } } diff --git a/client/src/components/PlaybackStateSubscriber.tsx b/client/src/components/PlaybackStateSubscriber.tsx index ca16f810..1514053d 100644 --- a/client/src/components/PlaybackStateSubscriber.tsx +++ b/client/src/components/PlaybackStateSubscriber.tsx @@ -47,7 +47,7 @@ const PLAYBACK_STATE_FRAGMENT = gql` } } - ...Playbar_playbackState + ...Playbar_playbackState @unmask(mode: "migrate") } `; @@ -56,7 +56,7 @@ const PLAYBACK_STATE_SUBSCRIBER_QUERY = gql` me { player { playbackState { - ...PlaybackStateFragment + ...PlaybackStateFragment @unmask(mode: "migrate") } } } @@ -68,7 +68,7 @@ const PLAYBACK_STATE_SUBSCRIBER_QUERY = gql` const PLAYBACK_STATE_SUBSCRIBER_SUBSCRIPTION = gql` subscription PlaybackStateSubscriberSubscription { playbackStateChanged { - ...PlaybackStateFragment + ...PlaybackStateFragment @unmask(mode: "migrate") } } diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index b5c7bf99..58b5d4b9 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -45,7 +45,7 @@ const PLAYBAR_QUERY: TypedDocumentNode< player { devices { id - ...DevicePopover_devices + ...DevicePopover_devices @unmask(mode: "migrate") } } } @@ -61,7 +61,7 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` disallows } context { - ...TrackPlaybackDetails_context + ...TrackPlaybackDetails_context @unmask(mode: "migrate") } device { id @@ -79,7 +79,7 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` url } } - ...TrackPlaybackDetails_track + ...TrackPlaybackDetails_track @unmask(mode: "migrate") } ... on Episode { show { @@ -88,13 +88,13 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` url } } - ...EpisodePlaybackDetails_episode + ...EpisodePlaybackDetails_episode @unmask(mode: "migrate") } - ...LikeControl_playbackItem + ...LikeControl_playbackItem @unmask(mode: "migrate") } - ...PlaybackItemProgressBar_playbackState + ...PlaybackItemProgressBar_playbackState @unmask(mode: "migrate") } `; diff --git a/client/src/routes/albums/album.tsx b/client/src/routes/albums/album.tsx index 079f8cd7..a8f07d71 100644 --- a/client/src/routes/albums/album.tsx +++ b/client/src/routes/albums/album.tsx @@ -60,7 +60,7 @@ const ALBUM_ROUTE_QUERY: TypedDocumentNode< precision } - ...AlbumTracksTable_album + ...AlbumTracksTable_album @unmask(mode: "migrate") } } `; diff --git a/client/src/routes/artists/artist.tsx b/client/src/routes/artists/artist.tsx index 3d070da2..7be6603e 100644 --- a/client/src/routes/artists/artist.tsx +++ b/client/src/routes/artists/artist.tsx @@ -22,15 +22,15 @@ const ARTIST_ROUTE_QUERY: TypedDocumentNode< id name albums(includeGroups: [ALBUM]) { - ...ArtistRouteQuery_albums + ...ArtistRouteQuery_albums @unmask(mode: "migrate") } singles: albums(includeGroups: [SINGLE]) { - ...ArtistRouteQuery_albums + ...ArtistRouteQuery_albums @unmask(mode: "migrate") } appearsOn: albums(includeGroups: [APPEARS_ON]) { - ...ArtistRouteQuery_albums + ...ArtistRouteQuery_albums @unmask(mode: "migrate") } followers { @@ -41,12 +41,12 @@ const ARTIST_ROUTE_QUERY: TypedDocumentNode< } relatedArtists { id - ...ArtistTile_artist + ...ArtistTile_artist @unmask(mode: "migrate") } topTracks { id - ...ArtistTopTracks_tracks + ...ArtistTopTracks_tracks @unmask(mode: "migrate") } } } @@ -56,7 +56,7 @@ const ARTIST_ROUTE_QUERY: TypedDocumentNode< node { id - ...AlbumTile_album + ...AlbumTile_album @unmask(mode: "migrate") } } } diff --git a/client/src/routes/collection/albums.tsx b/client/src/routes/collection/albums.tsx index 4f20c471..3bebd137 100644 --- a/client/src/routes/collection/albums.tsx +++ b/client/src/routes/collection/albums.tsx @@ -20,7 +20,7 @@ const COLLECTION_ALBUMS_ROUTE_QUERY = gql` edges { node { id - ...AlbumTile_album + ...AlbumTile_album @unmask(mode: "migrate") } } } diff --git a/client/src/routes/collection/artists.tsx b/client/src/routes/collection/artists.tsx index 862853a0..43231e89 100644 --- a/client/src/routes/collection/artists.tsx +++ b/client/src/routes/collection/artists.tsx @@ -20,7 +20,7 @@ const COLLECTION_ARTISTS_ROUTE_QUERY = gql` edges { node { id - ...ArtistTile_artist + ...ArtistTile_artist @unmask(mode: "migrate") } } } diff --git a/client/src/routes/collection/playlists.tsx b/client/src/routes/collection/playlists.tsx index da425660..f12cfc6f 100644 --- a/client/src/routes/collection/playlists.tsx +++ b/client/src/routes/collection/playlists.tsx @@ -40,7 +40,7 @@ const COLLECTION_PLAYLISTS_ROUTE_QUERY = gql` } } } - ...LikedSongsTile_connection + ...LikedSongsTile_connection @unmask(mode: "migrate") } playlists(offset: $offset, limit: $limit) @connection(key: "collectionPlaylists") { @@ -52,7 +52,7 @@ const COLLECTION_PLAYLISTS_ROUTE_QUERY = gql` edges { node { id - ...PlaylistTile_playlist + ...PlaylistTile_playlist @unmask(mode: "migrate") } } } @@ -73,7 +73,7 @@ const PAGINATED_QUERY = gql` edges { node { id - ...PlaylistTile_playlist + ...PlaylistTile_playlist @unmask(mode: "migrate") } } } diff --git a/client/src/routes/collection/podcasts.tsx b/client/src/routes/collection/podcasts.tsx index 1aecea7b..82afd891 100644 --- a/client/src/routes/collection/podcasts.tsx +++ b/client/src/routes/collection/podcasts.tsx @@ -17,7 +17,7 @@ const COLLECTION_PODCASTS_ROUTE_QUERY: TypedDocumentNode< query CollectionPodcastsRouteQuery($limit: Int, $offset: Int) { me { episodes(limit: 10) { - ...YourEpisodesTile_connection + ...YourEpisodesTile_connection @unmask(mode: "migrate") } shows(offset: $offset, limit: $limit) { pageInfo { diff --git a/client/src/routes/collection/tracks.tsx b/client/src/routes/collection/tracks.tsx index 66107b90..38b425f7 100644 --- a/client/src/routes/collection/tracks.tsx +++ b/client/src/routes/collection/tracks.tsx @@ -58,8 +58,8 @@ const COLLECTION_TRACKS_ROUTE_QUERY = gql` id } - ...TrackNumberCell_track - ...TrackTitleCell_track + ...TrackNumberCell_track @unmask(mode: "migrate") + ...TrackTitleCell_track @unmask(mode: "migrate") } } } diff --git a/client/src/routes/episodes/episode.tsx b/client/src/routes/episodes/episode.tsx index 50096e01..e211dea4 100644 --- a/client/src/routes/episodes/episode.tsx +++ b/client/src/routes/episodes/episode.tsx @@ -27,7 +27,7 @@ const EPISODE_ROUTE_QUERY = gql` } } - ...EpisodeRemainingDuration_episode + ...EpisodeRemainingDuration_episode @unmask(mode: "migrate") } } `; diff --git a/client/src/routes/index.tsx b/client/src/routes/index.tsx index 14e12139..2ebfbf77 100644 --- a/client/src/routes/index.tsx +++ b/client/src/routes/index.tsx @@ -33,7 +33,7 @@ const INDEX_ROUTE_QUERY: TypedDocumentNode< edges { node { id - ...PlaylistTile_playlist + ...PlaylistTile_playlist @unmask(mode: "migrate") } } } diff --git a/client/src/routes/playlists/playlist.tsx b/client/src/routes/playlists/playlist.tsx index d8830296..6ec02168 100644 --- a/client/src/routes/playlists/playlist.tsx +++ b/client/src/routes/playlists/playlist.tsx @@ -63,7 +63,7 @@ const PLAYLIST_QUERY = gql` name } - ...TrackNumberCell_track + ...TrackNumberCell_track @unmask(mode: "migrate") } ... on Episode { @@ -77,7 +77,7 @@ const PLAYLIST_QUERY = gql` } } - ...PlaylistTitleCell_playlistTrack + ...PlaylistTitleCell_playlistTrack @unmask(mode: "migrate") } } pageInfo { @@ -88,7 +88,7 @@ const PLAYLIST_QUERY = gql` } } - ...PlaylistTitleCell_playlist + ...PlaylistTitleCell_playlist @unmask(mode: "migrate") } } `; diff --git a/client/src/routes/queue.tsx b/client/src/routes/queue.tsx index e7c89d91..c81c75a6 100644 --- a/client/src/routes/queue.tsx +++ b/client/src/routes/queue.tsx @@ -43,10 +43,10 @@ const QUEUE_ROUTE_QUERY = gql` player { playbackQueue { currentlyPlaying { - ...QueueRoute_playbackItem + ...QueueRoute_playbackItem @unmask(mode: "migrate") } queue { - ...QueueRoute_playbackItem + ...QueueRoute_playbackItem @unmask(mode: "migrate") } } } @@ -62,15 +62,15 @@ const QUEUE_ROUTE_QUERY = gql` id name } - ...TrackNumberCell_track - ...TrackTitleCell_track + ...TrackNumberCell_track @unmask(mode: "migrate") + ...TrackTitleCell_track @unmask(mode: "migrate") } ... on Episode { show { id name } - ...EpisodeDetailsCell_episode + ...EpisodeDetailsCell_episode @unmask(mode: "migrate") } } `; diff --git a/client/src/routes/search/query.tsx b/client/src/routes/search/query.tsx index fe1b3152..6953100d 100644 --- a/client/src/routes/search/query.tsx +++ b/client/src/routes/search/query.tsx @@ -17,7 +17,7 @@ const SEARCH_ROUTE_QUERY = gql` edges { node { id - ...ArtistTile_artist + ...ArtistTile_artist @unmask(mode: "migrate") } } } diff --git a/client/src/routes/settings.tsx b/client/src/routes/settings.tsx index 735522ed..b44630b2 100644 --- a/client/src/routes/settings.tsx +++ b/client/src/routes/settings.tsx @@ -46,7 +46,7 @@ const LIMITED_INTROSPECTION_QUERY: TypedDocumentNode< name description type { - ...TypeRef + ...TypeRef @unmask(mode: "migrate") } } } diff --git a/client/src/routes/shows/show.tsx b/client/src/routes/shows/show.tsx index e2f1cc01..79ece313 100644 --- a/client/src/routes/shows/show.tsx +++ b/client/src/routes/shows/show.tsx @@ -35,7 +35,7 @@ const SHOW_ROUTE_QUERY = gql` precision } - ...EpisodeRemainingDuration_episode + ...EpisodeRemainingDuration_episode @unmask(mode: "migrate") } } } diff --git a/client/src/routes/tracks/track.tsx b/client/src/routes/tracks/track.tsx index fd0ff8cf..490a55e7 100644 --- a/client/src/routes/tracks/track.tsx +++ b/client/src/routes/tracks/track.tsx @@ -27,17 +27,17 @@ const TRACK_ROUTE_QUERY = gql` vibrantColor(format: RGB, alpha: 0.9) @client } - ...AlbumTracksTable_album + ...AlbumTracksTable_album @unmask(mode: "migrate") } artists { id name topTracks { id - ...ArtistTopTracks_tracks + ...ArtistTopTracks_tracks @unmask(mode: "migrate") } - ...ArtistTile_artist + ...ArtistTile_artist @unmask(mode: "migrate") } } } From 66fd21a77cc696c25e90c6daff68715f2728da34 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:10:12 -0700 Subject: [PATCH 07/64] Update docker compose command --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5c4a6b0b..ff75e4c6 100644 --- a/package.json +++ b/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", From 4f2321c6ba746a0c684873f67d1c4bd0802c26af Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:12:26 -0700 Subject: [PATCH 08/64] Remove rogue comma --- client/src/router.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/router.tsx b/client/src/router.tsx index 3ec7635e..af7d17cd 100644 --- a/client/src/router.tsx +++ b/client/src/router.tsx @@ -43,7 +43,6 @@ const routes = createRoutesFromElements( errorElement={} loader={OAuthRoute.loader} /> - , Date: Wed, 13 Nov 2024 17:25:29 -0700 Subject: [PATCH 09/64] Fix issue reading error extensions --- client/src/components/PlaybackStateSubscriber.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/PlaybackStateSubscriber.tsx b/client/src/components/PlaybackStateSubscriber.tsx index 1514053d..0e5cae7f 100644 --- a/client/src/components/PlaybackStateSubscriber.tsx +++ b/client/src/components/PlaybackStateSubscriber.tsx @@ -89,7 +89,7 @@ const PlaybackStateSubscriber = () => { if ( error instanceof ApolloError && error.graphQLErrors.some( - (error) => error.extensions.code === 'UNAUTHENTICATED' + (error) => error.extensions?.code === 'UNAUTHENTICATED' ) ) { navigate('/logged-out'); From 5e2e9715a7d0435547a21e87267c11be78c1d4ba Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:26:09 -0700 Subject: [PATCH 10/64] Enable data masking --- client/src/apollo/client.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/apollo/client.ts b/client/src/apollo/client.ts index b822a112..dbd26376 100644 --- a/client/src/apollo/client.ts +++ b/client/src/apollo/client.ts @@ -74,6 +74,7 @@ const httpLink = createHttpLink({ }); const client = new ApolloClient({ + dataMasking: true, link: from([httpAuthLink, persistedQueries, httpLink]), connectToDevTools: true, name: 'Spotify Showcase Website', From f2a2c75cf97234c49556962700aab579f9a2ca03 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:43:26 -0700 Subject: [PATCH 11/64] Temp remove masking warnings until fix is applied --- client/src/components/PlaybackStateSubscriber.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/PlaybackStateSubscriber.tsx b/client/src/components/PlaybackStateSubscriber.tsx index 0e5cae7f..d11d2b60 100644 --- a/client/src/components/PlaybackStateSubscriber.tsx +++ b/client/src/components/PlaybackStateSubscriber.tsx @@ -56,7 +56,7 @@ const PLAYBACK_STATE_SUBSCRIBER_QUERY = gql` me { player { playbackState { - ...PlaybackStateFragment @unmask(mode: "migrate") + ...PlaybackStateFragment @unmask } } } @@ -68,7 +68,7 @@ const PLAYBACK_STATE_SUBSCRIBER_QUERY = gql` const PLAYBACK_STATE_SUBSCRIBER_SUBSCRIPTION = gql` subscription PlaybackStateSubscriberSubscription { playbackStateChanged { - ...PlaybackStateFragment @unmask(mode: "migrate") + ...PlaybackStateFragment @unmask } } From 7817962340759b950ece331b2b0c482ec3e9f567 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:45:49 -0700 Subject: [PATCH 12/64] Rerun codegen with unmask --- client/src/types/api.ts | 654 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 601 insertions(+), 53 deletions(-) diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 894cdaef..b9577c49 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2407,7 +2407,9 @@ export type AlbumTracksTable_album = ({ uri: string; durationMs: number; trackNumber: number | null; - artists: Array<{ __typename: 'Artist'; id: string }>; + name: string; + explicit: boolean; + artists: Array<{ __typename: 'Artist'; id: string; name: string }>; } & { ' $fragmentRefs'?: { AlbumTrackTitleCell_track: AlbumTrackTitleCell_track; @@ -2488,6 +2490,7 @@ export type CurrentUserQuery = { __typename: 'CurrentUserProfile'; id: string; displayName: string | null; + images: Array<{ __typename: 'Image'; url: string }> | null; } & { ' $fragmentRefs'?: { Avatar_profile_CurrentUserProfile: Avatar_profile_CurrentUserProfile; @@ -2607,7 +2610,10 @@ export type SidebarQuery = { node: { __typename: 'Playlist'; id: string; + uri: string; + name: string; images: Array<{ __typename: 'Image'; url: string }> | null; + owner: { __typename: 'User'; id: string; displayName: string | null }; } & { ' $fragmentRefs'?: { PlaylistSidebarLink_playlist: PlaylistSidebarLink_playlist; @@ -2639,8 +2645,20 @@ export type PlaybackStateFragment = ({ isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; + progressMs: number | null; + timestamp: number; actions: { __typename: 'Actions'; disallows: Array }; - context: { __typename: 'PlaybackContext'; uri: string } | null; + context: + | ({ + __typename: 'PlaybackContext'; + uri: string; + type: PlaybackContextType; + } & { + ' $fragmentRefs'?: { + TrackPlaybackDetails_context: TrackPlaybackDetails_context; + }; + }) + | null; device: { __typename: 'Device'; id: string | null; @@ -2649,28 +2667,54 @@ export type PlaybackStateFragment = ({ volumePercent: number; }; item: - | { + | ({ __typename: 'Episode'; id: string; + durationMs: number; + name: string; show: { __typename: 'Show'; id: string; + name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } - | { + } & { + ' $fragmentRefs'?: { + EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; + LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; + }; + }) + | ({ __typename: 'Track'; id: string; + durationMs: number; + name: string; + uri: string; album: { __typename: 'Album'; id: string; + name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } + artists: Array<{ + __typename: 'Artist'; + id: string; + uri: string; + name: string; + }>; + } & { + ' $fragmentRefs'?: { + TrackPlaybackDetails_track: TrackPlaybackDetails_track; + LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; + }; + }) | null; -} & { ' $fragmentRefs'?: { Playbar_playbackState: Playbar_playbackState } }) & { - ' $fragmentName'?: 'PlaybackStateFragment'; -}; +} & { + ' $fragmentRefs'?: { + Playbar_playbackState: Playbar_playbackState; + PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; + }; +}) & { ' $fragmentName'?: 'PlaybackStateFragment' }; export type PlaybackStateSubscriberQueryVariables = Exact<{ [key: string]: never; @@ -2682,8 +2726,81 @@ export type PlaybackStateSubscriberQuery = { player: { __typename: 'Player'; playbackState: - | ({ __typename: 'PlaybackState' } & { - ' $fragmentRefs'?: { PlaybackStateFragment: PlaybackStateFragment }; + | ({ + __typename: 'PlaybackState'; + isPlaying: boolean; + repeatState: RepeatMode; + shuffleState: boolean; + progressMs: number | null; + timestamp: number; + actions: { __typename: 'Actions'; disallows: Array }; + context: + | ({ + __typename: 'PlaybackContext'; + uri: string; + type: PlaybackContextType; + } & { + ' $fragmentRefs'?: { + TrackPlaybackDetails_context: TrackPlaybackDetails_context; + }; + }) + | null; + device: { + __typename: 'Device'; + id: string | null; + name: string; + type: string; + volumePercent: number; + }; + item: + | ({ + __typename: 'Episode'; + id: string; + durationMs: number; + name: string; + show: { + __typename: 'Show'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + } & { + ' $fragmentRefs'?: { + EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; + LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; + }; + }) + | ({ + __typename: 'Track'; + id: string; + durationMs: number; + name: string; + uri: string; + album: { + __typename: 'Album'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + artists: Array<{ + __typename: 'Artist'; + id: string; + uri: string; + name: string; + }>; + } & { + ' $fragmentRefs'?: { + TrackPlaybackDetails_track: TrackPlaybackDetails_track; + LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; + }; + }) + | null; + } & { + ' $fragmentRefs'?: { + PlaybackStateFragment: PlaybackStateFragment; + Playbar_playbackState: Playbar_playbackState; + PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; + }; }) | null; }; @@ -2696,8 +2813,81 @@ export type PlaybackStateSubscriberSubscriptionVariables = Exact<{ export type PlaybackStateSubscriberSubscription = { playbackStateChanged: - | ({ __typename: 'PlaybackState' } & { - ' $fragmentRefs'?: { PlaybackStateFragment: PlaybackStateFragment }; + | ({ + __typename: 'PlaybackState'; + isPlaying: boolean; + repeatState: RepeatMode; + shuffleState: boolean; + progressMs: number | null; + timestamp: number; + actions: { __typename: 'Actions'; disallows: Array }; + context: + | ({ + __typename: 'PlaybackContext'; + uri: string; + type: PlaybackContextType; + } & { + ' $fragmentRefs'?: { + TrackPlaybackDetails_context: TrackPlaybackDetails_context; + }; + }) + | null; + device: { + __typename: 'Device'; + id: string | null; + name: string; + type: string; + volumePercent: number; + }; + item: + | ({ + __typename: 'Episode'; + id: string; + durationMs: number; + name: string; + show: { + __typename: 'Show'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + } & { + ' $fragmentRefs'?: { + EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; + LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; + }; + }) + | ({ + __typename: 'Track'; + id: string; + durationMs: number; + name: string; + uri: string; + album: { + __typename: 'Album'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + artists: Array<{ + __typename: 'Artist'; + id: string; + uri: string; + name: string; + }>; + } & { + ' $fragmentRefs'?: { + TrackPlaybackDetails_track: TrackPlaybackDetails_track; + LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; + }; + }) + | null; + } & { + ' $fragmentRefs'?: { + PlaybackStateFragment: PlaybackStateFragment; + Playbar_playbackState: Playbar_playbackState; + PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; + }; }) | null; }; @@ -2710,7 +2900,12 @@ export type PlaybarQuery = { player: { __typename: 'Player'; devices: Array< - { __typename: 'Device'; id: string | null } & { + { + __typename: 'Device'; + id: string | null; + name: string; + type: string; + } & { ' $fragmentRefs'?: { DevicePopover_devices: DevicePopover_devices }; } > | null; @@ -2723,9 +2918,15 @@ export type Playbar_playbackState = ({ isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; + progressMs: number | null; + timestamp: number; actions: { __typename: 'Actions'; disallows: Array }; context: - | ({ __typename: 'PlaybackContext' } & { + | ({ + __typename: 'PlaybackContext'; + uri: string; + type: PlaybackContextType; + } & { ' $fragmentRefs'?: { TrackPlaybackDetails_context: TrackPlaybackDetails_context; }; @@ -2742,9 +2943,12 @@ export type Playbar_playbackState = ({ | ({ __typename: 'Episode'; id: string; + durationMs: number; + name: string; show: { __typename: 'Show'; id: string; + name: string; images: Array<{ __typename: 'Image'; url: string }>; }; } & { @@ -2756,11 +2960,21 @@ export type Playbar_playbackState = ({ | ({ __typename: 'Track'; id: string; + durationMs: number; + name: string; + uri: string; album: { __typename: 'Album'; id: string; + name: string; images: Array<{ __typename: 'Image'; url: string }>; }; + artists: Array<{ + __typename: 'Artist'; + id: string; + uri: string; + name: string; + }>; } & { ' $fragmentRefs'?: { TrackPlaybackDetails_track: TrackPlaybackDetails_track; @@ -3318,8 +3532,35 @@ export type AlbumRouteQuery = { date: string; precision: ReleaseDatePrecision; }; + tracks: { + __typename: 'AlbumTrackConnection'; + edges: Array<{ + __typename: 'AlbumTrackEdge'; + node: { + __typename: 'Track'; + id: string; + uri: string; + durationMs: number; + trackNumber: number | null; + name: string; + explicit: boolean; + artists: Array<{ + __typename: 'Artist'; + id: string; + name: string; + }>; + } & { + ' $fragmentRefs'?: { + AlbumTrackTitleCell_track: AlbumTrackTitleCell_track; + }; + }; + }>; + } | null; } & { - ' $fragmentRefs'?: { AlbumTracksTable_album: AlbumTracksTable_album }; + ' $fragmentRefs'?: { + AlbumTracksTable_album: AlbumTracksTable_album; + AlbumTrackTitleCell_album: AlbumTrackTitleCell_album; + }; }) | null; }; @@ -3340,21 +3581,63 @@ export type ArtistRouteQuery = { id: string; name: string; albums: - | ({ __typename: 'ArtistAlbumsConnection' } & { + | ({ + __typename: 'ArtistAlbumsConnection'; + edges: Array<{ + __typename: 'ArtistAlbumEdge'; + node: { + __typename: 'Album'; + id: string; + name: string; + albumType: AlbumType; + totalTracks: number; + releaseDate: { __typename: 'ReleaseDate'; date: string }; + images: Array<{ __typename: 'Image'; url: string }>; + } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; + }> | null; + } & { ' $fragmentRefs'?: { ArtistRouteQuery_albums: ArtistRouteQuery_albums; }; }) | null; singles: - | ({ __typename: 'ArtistAlbumsConnection' } & { + | ({ + __typename: 'ArtistAlbumsConnection'; + edges: Array<{ + __typename: 'ArtistAlbumEdge'; + node: { + __typename: 'Album'; + id: string; + name: string; + albumType: AlbumType; + totalTracks: number; + releaseDate: { __typename: 'ReleaseDate'; date: string }; + images: Array<{ __typename: 'Image'; url: string }>; + } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; + }> | null; + } & { ' $fragmentRefs'?: { ArtistRouteQuery_albums: ArtistRouteQuery_albums; }; }) | null; appearsOn: - | ({ __typename: 'ArtistAlbumsConnection' } & { + | ({ + __typename: 'ArtistAlbumsConnection'; + edges: Array<{ + __typename: 'ArtistAlbumEdge'; + node: { + __typename: 'Album'; + id: string; + name: string; + albumType: AlbumType; + totalTracks: number; + releaseDate: { __typename: 'ReleaseDate'; date: string }; + images: Array<{ __typename: 'Image'; url: string }>; + } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; + }> | null; + } & { ' $fragmentRefs'?: { ArtistRouteQuery_albums: ArtistRouteQuery_albums; }; @@ -3363,12 +3646,26 @@ export type ArtistRouteQuery = { followers: { __typename: 'Followers'; total: number }; images: Array<{ __typename: 'Image'; url: string }>; relatedArtists: Array< - { __typename: 'Artist'; id: string } & { - ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; - } + { + __typename: 'Artist'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } } >; topTracks: Array< - { __typename: 'Track'; id: string } & { + { + __typename: 'Track'; + id: string; + durationMs: number; + explicit: boolean; + name: string; + album: { + __typename: 'Album'; + id: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + } & { ' $fragmentRefs'?: { ArtistTopTracks_tracks: ArtistTopTracks_tracks }; } >; @@ -3379,9 +3676,15 @@ export type ArtistRouteQuery_albums = { __typename: 'ArtistAlbumsConnection'; edges: Array<{ __typename: 'ArtistAlbumEdge'; - node: { __typename: 'Album'; id: string } & { - ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; - }; + node: { + __typename: 'Album'; + id: string; + name: string; + albumType: AlbumType; + totalTracks: number; + releaseDate: { __typename: 'ReleaseDate'; date: string }; + images: Array<{ __typename: 'Image'; url: string }>; + } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; }> | null; } & { ' $fragmentName'?: 'ArtistRouteQuery_albums' }; @@ -3403,9 +3706,15 @@ export type CollectionAlbumsRouteQuery = { }; edges: Array<{ __typename: 'SavedAlbumEdge'; - node: { __typename: 'Album'; id: string } & { - ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; - }; + node: { + __typename: 'Album'; + id: string; + name: string; + albumType: AlbumType; + totalTracks: number; + releaseDate: { __typename: 'ReleaseDate'; date: string }; + images: Array<{ __typename: 'Image'; url: string }>; + } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; }>; } | null; } | null; @@ -3426,9 +3735,12 @@ export type CollectionArtistsRouteQuery = { }; edges: Array<{ __typename: 'FollowedArtistEdge'; - node: { __typename: 'Artist'; id: string } & { - ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; - }; + node: { + __typename: 'Artist'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } }; }>; } | null; } | null; @@ -3480,7 +3792,14 @@ export type CollectionPlaylistsRouteQuery = { }; edges: Array<{ __typename: 'PlaylistEdge'; - node: { __typename: 'Playlist'; id: string } & { + node: { + __typename: 'Playlist'; + id: string; + name: string; + description: string | null; + uri: string; + images: Array<{ __typename: 'Image'; url: string }> | null; + } & { ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; @@ -3506,7 +3825,14 @@ export type CollectionPlaylistsRoutePaginatedQuery = { }; edges: Array<{ __typename: 'PlaylistEdge'; - node: { __typename: 'Playlist'; id: string } & { + node: { + __typename: 'Playlist'; + id: string; + name: string; + description: string | null; + uri: string; + images: Array<{ __typename: 'Image'; url: string }> | null; + } & { ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; @@ -3523,7 +3849,19 @@ export type CollectionPodcastsRouteQuery = { me: { __typename: 'CurrentUser'; episodes: - | ({ __typename: 'SavedEpisodesConnection' } & { + | ({ + __typename: 'SavedEpisodesConnection'; + pageInfo: { __typename: 'PageInfo'; total: number }; + edges: Array<{ + __typename: 'SavedEpisodeEdge'; + node: { + __typename: 'Episode'; + id: string; + name: string; + show: { __typename: 'Show'; id: string; name: string }; + }; + }>; + } & { ' $fragmentRefs'?: { YourEpisodesTile_connection: YourEpisodesTile_connection; }; @@ -3611,7 +3949,15 @@ export type CollectionTracksRouteQuery = { id: string; name: string; durationMs: number; - album: { __typename: 'Album'; id: string }; + uri: string; + trackNumber: number | null; + explicit: boolean; + album: { + __typename: 'Album'; + id: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + artists: Array<{ __typename: 'Artist'; id: string; name: string }>; } & { ' $fragmentRefs'?: { TrackNumberCell_track: TrackNumberCell_track; @@ -3644,6 +3990,7 @@ export type EpisodeRouteQuery = { __typename: 'Episode'; id: string; name: string; + durationMs: number; releaseDate: { __typename: 'ReleaseDate'; date: string; @@ -3659,6 +4006,11 @@ export type EpisodeRouteQuery = { vibrantColor: string | null; }>; }; + resumePoint: { + __typename: 'ResumePoint'; + fullyPlayed: boolean; + resumePositionMs: number; + }; } & { ' $fragmentRefs'?: { EpisodeRemainingDuration_episode: EpisodeRemainingDuration_episode; @@ -3677,7 +4029,14 @@ export type IndexRouteQuery = { message: string; edges: Array<{ __typename: 'FeaturedPlaylistEdge'; - node: { __typename: 'Playlist'; id: string } & { + node: { + __typename: 'Playlist'; + id: string; + name: string; + description: string | null; + uri: string; + images: Array<{ __typename: 'Image'; url: string }> | null; + } & { ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; @@ -3718,12 +4077,19 @@ export type PlaylistQuery = { name: string; durationMs: number; uri: string; + explicit: boolean; releaseDate: { __typename: 'ReleaseDate'; date: string; precision: ReleaseDatePrecision; }; - show: { __typename: 'Show'; id: string; name: string }; + show: { + __typename: 'Show'; + id: string; + name: string; + publisher: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; } & { ' $fragmentRefs'?: { PlaylistTitleCell_playlistTrack_Episode: PlaylistTitleCell_playlistTrack_Episode; @@ -3735,7 +4101,19 @@ export type PlaylistQuery = { name: string; durationMs: number; uri: string; - album: { __typename: 'Album'; id: string; name: string }; + trackNumber: number | null; + explicit: boolean; + album: { + __typename: 'Album'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + artists: Array<{ + __typename: 'Artist'; + id: string; + name: string; + }>; } & { ' $fragmentRefs'?: { TrackNumberCell_track: TrackNumberCell_track; @@ -3775,26 +4153,98 @@ export type QueueRouteQuery = { playbackQueue: { __typename: 'PlaybackQueue'; currentlyPlaying: - | ({ __typename: 'Episode' } & { + | ({ + __typename: 'Episode'; + id: string; + durationMs: number; + uri: string; + explicit: boolean; + name: string; + show: { + __typename: 'Show'; + id: string; + name: string; + publisher: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + } & { ' $fragmentRefs'?: { QueueRoute_playbackItem_Episode: QueueRoute_playbackItem_Episode; + EpisodeDetailsCell_episode: EpisodeDetailsCell_episode; }; }) - | ({ __typename: 'Track' } & { + | ({ + __typename: 'Track'; + id: string; + durationMs: number; + uri: string; + trackNumber: number | null; + explicit: boolean; + name: string; + album: { + __typename: 'Album'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + artists: Array<{ + __typename: 'Artist'; + id: string; + name: string; + }>; + } & { ' $fragmentRefs'?: { QueueRoute_playbackItem_Track: QueueRoute_playbackItem_Track; + TrackNumberCell_track: TrackNumberCell_track; + TrackTitleCell_track: TrackTitleCell_track; }; }) | null; queue: Array< - | ({ __typename: 'Episode' } & { + | ({ + __typename: 'Episode'; + id: string; + durationMs: number; + uri: string; + explicit: boolean; + name: string; + show: { + __typename: 'Show'; + id: string; + name: string; + publisher: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + } & { ' $fragmentRefs'?: { QueueRoute_playbackItem_Episode: QueueRoute_playbackItem_Episode; + EpisodeDetailsCell_episode: EpisodeDetailsCell_episode; }; }) - | ({ __typename: 'Track' } & { + | ({ + __typename: 'Track'; + id: string; + durationMs: number; + uri: string; + trackNumber: number | null; + explicit: boolean; + name: string; + album: { + __typename: 'Album'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + artists: Array<{ + __typename: 'Artist'; + id: string; + name: string; + }>; + } & { ' $fragmentRefs'?: { QueueRoute_playbackItem_Track: QueueRoute_playbackItem_Track; + TrackNumberCell_track: TrackNumberCell_track; + TrackTitleCell_track: TrackTitleCell_track; }; }) >; @@ -3808,7 +4258,15 @@ type QueueRoute_playbackItem_Episode = ({ id: string; durationMs: number; uri: string; - show: { __typename: 'Show'; id: string; name: string }; + explicit: boolean; + name: string; + show: { + __typename: 'Show'; + id: string; + name: string; + publisher: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; } & { ' $fragmentRefs'?: { EpisodeDetailsCell_episode: EpisodeDetailsCell_episode }; }) & { ' $fragmentName'?: 'QueueRoute_playbackItem_Episode' }; @@ -3818,7 +4276,16 @@ type QueueRoute_playbackItem_Track = ({ id: string; durationMs: number; uri: string; - album: { __typename: 'Album'; id: string; name: string }; + trackNumber: number | null; + explicit: boolean; + name: string; + album: { + __typename: 'Album'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + artists: Array<{ __typename: 'Artist'; id: string; name: string }>; } & { ' $fragmentRefs'?: { TrackNumberCell_track: TrackNumberCell_track; @@ -3852,9 +4319,12 @@ export type SearchRouteQuery = { __typename: 'SearchArtistsConnection'; edges: Array<{ __typename: 'SearchArtistEdge'; - node: { __typename: 'Artist'; id: string } & { - ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; - }; + node: { + __typename: 'Artist'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } }; }>; } | null; } | null; @@ -3893,9 +4363,46 @@ export type LimitedIntrospectionQuery = { __typename: '__Field'; name: string; description: string | null; - type: { __typename: '__Type' } & { - ' $fragmentRefs'?: { TypeRef: TypeRef }; - }; + type: { + __typename: '__Type'; + kind: __TypeKind; + name: string | null; + ofType: { + __typename: '__Type'; + kind: __TypeKind; + name: string | null; + ofType: { + __typename: '__Type'; + kind: __TypeKind; + name: string | null; + ofType: { + __typename: '__Type'; + kind: __TypeKind; + name: string | null; + ofType: { + __typename: '__Type'; + kind: __TypeKind; + name: string | null; + ofType: { + __typename: '__Type'; + kind: __TypeKind; + name: string | null; + ofType: { + __typename: '__Type'; + kind: __TypeKind; + name: string | null; + ofType: { + __typename: '__Type'; + kind: __TypeKind; + name: string | null; + } | null; + } | null; + } | null; + } | null; + } | null; + } | null; + } | null; + } & { ' $fragmentRefs'?: { TypeRef: TypeRef } }; }> | null; }>; }; @@ -3968,6 +4475,11 @@ export type ShowRouteQuery = { date: string; precision: ReleaseDatePrecision; }; + resumePoint: { + __typename: 'ResumePoint'; + fullyPlayed: boolean; + resumePositionMs: number; + }; } & { ' $fragmentRefs'?: { EpisodeRemainingDuration_episode: EpisodeRemainingDuration_episode; @@ -4007,13 +4519,37 @@ export type TrackRouteQuery = { id: string; albumType: AlbumType; name: string; + uri: string; images: Array<{ __typename: 'Image'; url: string; vibrantColor: string | null; }>; + tracks: { + __typename: 'AlbumTrackConnection'; + edges: Array<{ + __typename: 'AlbumTrackEdge'; + node: { + __typename: 'Track'; + id: string; + uri: string; + durationMs: number; + trackNumber: number | null; + name: string; + explicit: boolean; + artists: Array<{ __typename: 'Artist'; id: string; name: string }>; + } & { + ' $fragmentRefs'?: { + AlbumTrackTitleCell_track: AlbumTrackTitleCell_track; + }; + }; + }>; + } | null; } & { - ' $fragmentRefs'?: { AlbumTracksTable_album: AlbumTracksTable_album }; + ' $fragmentRefs'?: { + AlbumTracksTable_album: AlbumTracksTable_album; + AlbumTrackTitleCell_album: AlbumTrackTitleCell_album; + }; }; artists: Array< { @@ -4021,12 +4557,24 @@ export type TrackRouteQuery = { id: string; name: string; topTracks: Array< - { __typename: 'Track'; id: string } & { + { + __typename: 'Track'; + id: string; + durationMs: number; + explicit: boolean; + name: string; + album: { + __typename: 'Album'; + id: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + } & { ' $fragmentRefs'?: { ArtistTopTracks_tracks: ArtistTopTracks_tracks; }; } >; + images: Array<{ __typename: 'Image'; url: string }>; } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } } >; } | null; From 92eddb1025cb395d6163e0ba6e58a8ee587ceddd Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:50:20 -0700 Subject: [PATCH 13/64] Enable data masking in TypeScript globally --- client/src/@types/@apollo/client.d.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 client/src/@types/@apollo/client.d.ts diff --git a/client/src/@types/@apollo/client.d.ts b/client/src/@types/@apollo/client.d.ts new file mode 100644 index 00000000..9370899b --- /dev/null +++ b/client/src/@types/@apollo/client.d.ts @@ -0,0 +1,7 @@ +import '@apollo/client'; + +declare module '@apollo/client' { + interface DataMasking { + enabled: true; + } +} From 27fbad9b20e7319db040b6e2cce9c1d464ca67fc Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:55:20 -0700 Subject: [PATCH 14/64] Convert PlaylistTile to use useFragment --- client/src/components/PlaylistTile.tsx | 38 ++++++++++++++++++-------- client/src/routes/index.tsx | 2 +- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/client/src/components/PlaylistTile.tsx b/client/src/components/PlaylistTile.tsx index 7a4dffc2..5b11ee27 100644 --- a/client/src/components/PlaylistTile.tsx +++ b/client/src/components/PlaylistTile.tsx @@ -1,15 +1,20 @@ -import { gql } from '@apollo/client'; -import { PlaylistTile_playlist as Playlist } from '../types/api'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; +import { PlaylistTile_playlist } from '../types/api'; import ContextMenu from './ContextMenu'; import ContextMenuAction from './ContextMenuAction'; import MediaTile from './MediaTile'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface PlaylistTileProps { - playlist: Playlist; + playlist: FragmentType; } -fragmentRegistry.register(gql` +const PlaylistTileFragment: TypedDocumentNode = gql` fragment PlaylistTile_playlist on Playlist { id name @@ -19,30 +24,41 @@ fragmentRegistry.register(gql` url } } -`); +`; + +fragmentRegistry.register(PlaylistTileFragment); const PlaylistTile = ({ playlist }: PlaylistTileProps) => { + const { data, complete } = useFragment({ + fragment: PlaylistTileFragment, + from: playlist, + }); + + if (!complete) { + return null; + } + return ( } + content={} > Share - + } > - - + +
- {playlist.name} + {data.name}
diff --git a/client/src/routes/index.tsx b/client/src/routes/index.tsx index 2ebfbf77..14e12139 100644 --- a/client/src/routes/index.tsx +++ b/client/src/routes/index.tsx @@ -33,7 +33,7 @@ const INDEX_ROUTE_QUERY: TypedDocumentNode< edges { node { id - ...PlaylistTile_playlist @unmask(mode: "migrate") + ...PlaylistTile_playlist } } } From 984dbe6ebc79312d0585f97f3a166400f69f34ce Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Wed, 13 Nov 2024 17:59:27 -0700 Subject: [PATCH 15/64] Convert CurrentUserMenu to use useFragment and data masking --- client/src/components/Avatar.tsx | 40 ++++++++++++++++------- client/src/components/CurrentUserMenu.tsx | 2 +- 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/client/src/components/Avatar.tsx b/client/src/components/Avatar.tsx index 98771529..d68d8d4e 100644 --- a/client/src/components/Avatar.tsx +++ b/client/src/components/Avatar.tsx @@ -1,5 +1,10 @@ import { CSSProperties } from 'react'; -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import { Avatar_profile as Profile } from '../types/api'; import { thumbnail } from '../utils/image'; import LazyImage from './LazyImage'; @@ -7,11 +12,31 @@ import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface AvatarProps { size?: CSSProperties['width']; - profile: Profile; + profile: FragmentType; } +const AvatarFragment: TypedDocumentNode = gql` + fragment Avatar_profile on UserProfile { + id + images { + url + } + } +`; + +fragmentRegistry.register(AvatarFragment); + const Avatar = ({ profile, size }: AvatarProps) => { - const image = thumbnail(profile.images ?? []); + const { data, complete } = useFragment({ + fragment: AvatarFragment, + from: profile, + }); + + if (!complete) { + return null; + } + + const image = thumbnail(data.images ?? []); return ( { ); }; -fragmentRegistry.register(gql` - fragment Avatar_profile on UserProfile { - id - images { - url - } - } -`); - export default Avatar; diff --git a/client/src/components/CurrentUserMenu.tsx b/client/src/components/CurrentUserMenu.tsx index 170ac83d..26edadcd 100644 --- a/client/src/components/CurrentUserMenu.tsx +++ b/client/src/components/CurrentUserMenu.tsx @@ -13,7 +13,7 @@ const CURRENT_USER_QUERY: TypedDocumentNode< profile { id displayName - ...Avatar_profile @unmask(mode: "migrate") + ...Avatar_profile } } } From 48581055c64b85b9cd7179ae34620ea7c5afa098 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 09:08:53 -0700 Subject: [PATCH 16/64] Migrate device popover to data masking --- client/src/components/DevicePopover.tsx | 45 +++++++++++++++++-------- client/src/components/Playbar.tsx | 22 ++++++------ client/src/types/api.ts | 39 +++++++-------------- 3 files changed, 54 insertions(+), 52 deletions(-) diff --git a/client/src/components/DevicePopover.tsx b/client/src/components/DevicePopover.tsx index bb81ffbe..4064ec21 100644 --- a/client/src/components/DevicePopover.tsx +++ b/client/src/components/DevicePopover.tsx @@ -1,7 +1,12 @@ import { ReactNode } from 'react'; -import { gql } from '@apollo/client'; import { - DevicePopover_devices as Device, + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; +import { + DevicePopover_player, DevicePopover_playbackState as PlaybackState, } from '../types/api'; import Popover from './Popover'; @@ -12,7 +17,7 @@ import useTransferPlaybackMutation from '../mutations/useTransferPlaybackMutatio import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface DevicePopoverProps { - devices: Device[]; + player: FragmentType; children: ReactNode; } @@ -25,25 +30,37 @@ const PLAYBACK_STATE_FRAGMENT = gql` } `; -fragmentRegistry.register(gql` - fragment DevicePopover_devices on Device { - id - name - type +const DevicePopoverFragment: TypedDocumentNode = gql` + fragment DevicePopover_player on Player { + devices { + id + name + type + } } -`); +`; + +fragmentRegistry.register(DevicePopoverFragment); -const DevicePopover = ({ devices, children }: DevicePopoverProps) => { +const DevicePopover = ({ children, player }: DevicePopoverProps) => { const [transferPlayback] = useTransferPlaybackMutation(); const playbackState = usePlaybackState({ fragment: PLAYBACK_STATE_FRAGMENT, }); - const currentDevice = devices.find( + const { data, complete } = useFragment({ + fragment: DevicePopoverFragment, + from: player, + }); + + if (!complete) { + return null; + } + + const currentDevice = data.devices?.find( (device) => device.id === playbackState?.device.id ); - const availableDevices = devices.filter( - (device) => device.id !== currentDevice?.id - ); + const availableDevices = + data.devices?.filter((device) => device.id !== currentDevice?.id) ?? []; return ( { const [resumePlayback] = useResumePlaybackMutation(); const playbackState = usePlaybackState({ fragment: PLAYBACK_STATE_FRAGMENT }); + const player = data.me?.player; const playbackItem = playbackState?.item ?? null; const device = playbackState?.device; const devices = data.me?.player.devices ?? []; @@ -176,13 +174,15 @@ const Playbar = () => { - - } - tooltip="Connect to a device" - /> - + {player && ( + + } + tooltip="Connect to a device" + /> + + )} | null; } & { ' $fragmentRefs'?: { Avatar_profile_CurrentUserProfile: Avatar_profile_CurrentUserProfile; @@ -2505,12 +2504,15 @@ export type DevicePopover_playbackState = { device: { __typename: 'Device'; id: string | null }; } & { ' $fragmentName'?: 'DevicePopover_playbackState' }; -export type DevicePopover_devices = { - __typename: 'Device'; - id: string | null; - name: string; - type: string; -} & { ' $fragmentName'?: 'DevicePopover_devices' }; +export type DevicePopover_player = { + __typename: 'Player'; + devices: Array<{ + __typename: 'Device'; + id: string | null; + name: string; + type: string; + }> | null; +} & { ' $fragmentName'?: 'DevicePopover_player' }; export type EpisodeDetailsCell_episode = { __typename: 'Episode'; @@ -2897,18 +2899,8 @@ export type PlaybarQueryVariables = Exact<{ [key: string]: never }>; export type PlaybarQuery = { me: { __typename: 'CurrentUser'; - player: { - __typename: 'Player'; - devices: Array< - { - __typename: 'Device'; - id: string | null; - name: string; - type: string; - } & { - ' $fragmentRefs'?: { DevicePopover_devices: DevicePopover_devices }; - } - > | null; + player: { __typename: 'Player' } & { + ' $fragmentRefs'?: { DevicePopover_player: DevicePopover_player }; }; } | null; }; @@ -4029,14 +4021,7 @@ export type IndexRouteQuery = { message: string; edges: Array<{ __typename: 'FeaturedPlaylistEdge'; - node: { - __typename: 'Playlist'; - id: string; - name: string; - description: string | null; - uri: string; - images: Array<{ __typename: 'Image'; url: string }> | null; - } & { + node: { __typename: 'Playlist'; id: string } & { ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; From e0beaf7e7d46bf03acf04bf64453fe1895007640 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 12:36:27 -0700 Subject: [PATCH 17/64] Temp install pr version --- client/package.json | 2 +- package-lock.json | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/client/package.json b/client/package.json index 416243de..a4876b1e 100644 --- a/client/package.json +++ b/client/package.json @@ -6,7 +6,7 @@ "node": ">=18" }, "dependencies": { - "@apollo/client": "^3.12.0-rc.0", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12130", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", diff --git a/package-lock.json b/package-lock.json index 894c0d6d..b6e84076 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "client": { "version": "0.1.0", "dependencies": { - "@apollo/client": "^3.12.0-rc.0", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12130", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", @@ -110,8 +110,9 @@ }, "client/node_modules/@apollo/client": { "version": "3.12.0-rc.0", - "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-rc.0.tgz", - "integrity": "sha512-pn7WXU6af8MUI+/RvOAr3k1R0MkmVDyRRaHn+Hm/SYRrMCjp793Ho/+UMk0AaTWTdGikwJlg2Ayx0IYCYejJXQ==", + "resolved": "https://pkg.pr.new/@apollo/client@12130", + "integrity": "sha512-UyVVdU74IQRoWwH8IneN8IsRkJYzpQNnQ3V2npIwazzom9fDBk46phuNqyYJ8cbS9okbcikT1TSBJCwiVn3XLA==", + "license": "MIT", "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", @@ -24867,7 +24868,7 @@ "client": { "version": "file:client", "requires": { - "@apollo/client": "^3.12.0-rc.0", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12130", "@apollo/persisted-query-lists": "^1.0.0", "@apollo/rover": "^0.16.2", "@mdx-js/rollup": "^2.3.0", @@ -24924,9 +24925,8 @@ }, "dependencies": { "@apollo/client": { - "version": "3.12.0-rc.0", - "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-rc.0.tgz", - "integrity": "sha512-pn7WXU6af8MUI+/RvOAr3k1R0MkmVDyRRaHn+Hm/SYRrMCjp793Ho/+UMk0AaTWTdGikwJlg2Ayx0IYCYejJXQ==", + "version": "https://pkg.pr.new/@apollo/client@12130", + "integrity": "sha512-UyVVdU74IQRoWwH8IneN8IsRkJYzpQNnQ3V2npIwazzom9fDBk46phuNqyYJ8cbS9okbcikT1TSBJCwiVn3XLA==", "requires": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", From 88e99c92ff345c3e2584436dab5543558b60b41c Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 12:37:49 -0700 Subject: [PATCH 18/64] Add back migrate mode --- client/src/components/PlaybackStateSubscriber.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/PlaybackStateSubscriber.tsx b/client/src/components/PlaybackStateSubscriber.tsx index d11d2b60..0e5cae7f 100644 --- a/client/src/components/PlaybackStateSubscriber.tsx +++ b/client/src/components/PlaybackStateSubscriber.tsx @@ -56,7 +56,7 @@ const PLAYBACK_STATE_SUBSCRIBER_QUERY = gql` me { player { playbackState { - ...PlaybackStateFragment @unmask + ...PlaybackStateFragment @unmask(mode: "migrate") } } } @@ -68,7 +68,7 @@ const PLAYBACK_STATE_SUBSCRIBER_QUERY = gql` const PLAYBACK_STATE_SUBSCRIBER_SUBSCRIPTION = gql` subscription PlaybackStateSubscriberSubscription { playbackStateChanged { - ...PlaybackStateFragment @unmask + ...PlaybackStateFragment @unmask(mode: "migrate") } } From a24c3ed370cf186b5285097aa8d5a42eed2bf7cb Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 13:35:22 -0700 Subject: [PATCH 19/64] Update PlaybackItemProgressBar to use data masking --- .../components/PlaybackItemProgressBar.tsx | 74 ++++++++++++++----- client/src/components/Playbar.tsx | 2 +- 2 files changed, 58 insertions(+), 18 deletions(-) diff --git a/client/src/components/PlaybackItemProgressBar.tsx b/client/src/components/PlaybackItemProgressBar.tsx index 27a0d6ec..e9b938b8 100644 --- a/client/src/components/PlaybackItemProgressBar.tsx +++ b/client/src/components/PlaybackItemProgressBar.tsx @@ -1,4 +1,9 @@ -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import Flex from './Flex'; import ProgressBar from './ProgressBar'; import Duration from './Duration'; @@ -8,15 +13,62 @@ import useSeekToPositionMutation from '../mutations/useSeekToPositionMutation'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface PlaybackItemProgressBarProps { - playbackState: PlaybackState | null | undefined; + playbackState: FragmentType | null | undefined; } +const PlaybackItemProgressBarFragment: TypedDocumentNode = gql` + fragment PlaybackItemProgressBar_playbackState on PlaybackState { + isPlaying + progressMs + timestamp + item { + id + durationMs + } + } +`; + +fragmentRegistry.register(PlaybackItemProgressBarFragment); + const PlaybackItemProgressBar = ({ playbackState, }: PlaybackItemProgressBarProps) => { - const playbackItem = playbackState?.item; + return playbackState ? ( + + ) : ( + + ); +}; + +function Placeholder() { + return ( + + + + + + + + + + ); +} + +interface CurrentPlaybackProps { + playbackState: FragmentType; +} + +function CurrentPlayback({ playbackState }: CurrentPlaybackProps) { + const { data, complete } = useFragment({ + fragment: PlaybackItemProgressBarFragment, + from: playbackState, + }); + + const playbackItem = data?.item; const durationMs = playbackItem?.durationMs ?? 0; - const progressMs = usePlaybackProgress(playbackState, { max: durationMs }); + const progressMs = usePlaybackProgress(complete ? data : null, { + max: durationMs, + }); const [seekToPosition] = useSeekToPositionMutation(); return ( @@ -38,18 +90,6 @@ const PlaybackItemProgressBar = ({ ); -}; - -fragmentRegistry.register(gql` - fragment PlaybackItemProgressBar_playbackState on PlaybackState { - isPlaying - progressMs - timestamp - item { - id - durationMs - } - } -`); +} export default PlaybackItemProgressBar; diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index c78f7f1d..cb9cf591 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -91,7 +91,7 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` ...LikeControl_playbackItem @unmask(mode: "migrate") } - ...PlaybackItemProgressBar_playbackState @unmask(mode: "migrate") + ...PlaybackItemProgressBar_playbackState } `; From 8219f88f7bffac2d683aed959bd8c903a3790d05 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 13:46:29 -0700 Subject: [PATCH 20/64] Migrate track prop from TrackPlaybackDetails --- client/src/components/Playbar.tsx | 2 +- .../src/components/TrackPlaybackDetails.tsx | 51 +++++++++++++----- client/src/types/api.ts | 52 ------------------- 3 files changed, 39 insertions(+), 66 deletions(-) diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index cb9cf591..81452f1b 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -76,7 +76,7 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` url } } - ...TrackPlaybackDetails_track @unmask(mode: "migrate") + ...TrackPlaybackDetails_track } ... on Episode { show { diff --git a/client/src/components/TrackPlaybackDetails.tsx b/client/src/components/TrackPlaybackDetails.tsx index 13b492ac..941683e2 100644 --- a/client/src/components/TrackPlaybackDetails.tsx +++ b/client/src/components/TrackPlaybackDetails.tsx @@ -1,8 +1,15 @@ -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import { TrackPlaybackDetails_context as Context, TrackPlaybackDetails_track as Track, PlaybackContextType, + TrackPlaybackDetails_context, + TrackPlaybackDetails_track, } from '../types/api'; import ContextMenuAction from './ContextMenuAction'; import ContextMenu from './ContextMenu'; @@ -14,22 +21,31 @@ import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface TrackPlaybackDetailsProps { context: Context | null; - track: Track; + track: FragmentType; } const TrackPlaybackDetails = ({ context, track, }: TrackPlaybackDetailsProps) => { + const { data: trackData, complete } = useFragment({ + fragment: TrackPlaybackDetailsTrackFragment, + from: track, + }); + + if (!complete) { + return null; + } + return ( - + - - + + Go to album @@ -37,27 +53,29 @@ const TrackPlaybackDetails = ({ <> )} } + content={ + + } > Share - + } > - - {track.name} + + {trackData.name} - {track.artists.map((artist) => ( + {trackData.artists.map((artist) => ( = gql` fragment TrackPlaybackDetails_context on PlaybackContext { uri type } +`; +const TrackPlaybackDetailsTrackFragment: TypedDocumentNode = gql` fragment TrackPlaybackDetails_track on Track { id name @@ -104,6 +124,11 @@ fragmentRegistry.register(gql` name } } -`); +`; + +fragmentRegistry.register( + TrackPlaybackDetailsContextFragment, + TrackPlaybackDetailsTrackFragment +); export default TrackPlaybackDetails; diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 5a4c80c2..3e5cd90b 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2647,8 +2647,6 @@ export type PlaybackStateFragment = ({ isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; - progressMs: number | null; - timestamp: number; actions: { __typename: 'Actions'; disallows: Array }; context: | ({ @@ -2672,7 +2670,6 @@ export type PlaybackStateFragment = ({ | ({ __typename: 'Episode'; id: string; - durationMs: number; name: string; show: { __typename: 'Show'; @@ -2689,21 +2686,11 @@ export type PlaybackStateFragment = ({ | ({ __typename: 'Track'; id: string; - durationMs: number; - name: string; - uri: string; album: { __typename: 'Album'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; } & { ' $fragmentRefs'?: { TrackPlaybackDetails_track: TrackPlaybackDetails_track; @@ -2733,8 +2720,6 @@ export type PlaybackStateSubscriberQuery = { isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; - progressMs: number | null; - timestamp: number; actions: { __typename: 'Actions'; disallows: Array }; context: | ({ @@ -2758,7 +2743,6 @@ export type PlaybackStateSubscriberQuery = { | ({ __typename: 'Episode'; id: string; - durationMs: number; name: string; show: { __typename: 'Show'; @@ -2775,21 +2759,11 @@ export type PlaybackStateSubscriberQuery = { | ({ __typename: 'Track'; id: string; - durationMs: number; - name: string; - uri: string; album: { __typename: 'Album'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; } & { ' $fragmentRefs'?: { TrackPlaybackDetails_track: TrackPlaybackDetails_track; @@ -2820,8 +2794,6 @@ export type PlaybackStateSubscriberSubscription = { isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; - progressMs: number | null; - timestamp: number; actions: { __typename: 'Actions'; disallows: Array }; context: | ({ @@ -2845,7 +2817,6 @@ export type PlaybackStateSubscriberSubscription = { | ({ __typename: 'Episode'; id: string; - durationMs: number; name: string; show: { __typename: 'Show'; @@ -2862,21 +2833,11 @@ export type PlaybackStateSubscriberSubscription = { | ({ __typename: 'Track'; id: string; - durationMs: number; - name: string; - uri: string; album: { __typename: 'Album'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; } & { ' $fragmentRefs'?: { TrackPlaybackDetails_track: TrackPlaybackDetails_track; @@ -2910,8 +2871,6 @@ export type Playbar_playbackState = ({ isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; - progressMs: number | null; - timestamp: number; actions: { __typename: 'Actions'; disallows: Array }; context: | ({ @@ -2935,7 +2894,6 @@ export type Playbar_playbackState = ({ | ({ __typename: 'Episode'; id: string; - durationMs: number; name: string; show: { __typename: 'Show'; @@ -2952,21 +2910,11 @@ export type Playbar_playbackState = ({ | ({ __typename: 'Track'; id: string; - durationMs: number; - name: string; - uri: string; album: { __typename: 'Album'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; } & { ' $fragmentRefs'?: { TrackPlaybackDetails_track: TrackPlaybackDetails_track; From 1cde56b1611263f83a424b6ae1fddf65bbfbc702 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 13:56:21 -0700 Subject: [PATCH 21/64] Reoganize TrackPlaybackDetails to select from parent --- client/src/components/Playbar.tsx | 12 +-- .../src/components/TrackPlaybackDetails.tsx | 100 ++++++++---------- client/src/types/api.ts | 96 ++++++----------- 3 files changed, 79 insertions(+), 129 deletions(-) diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index 81452f1b..8e85907a 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -57,9 +57,6 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` actions { disallows } - context { - ...TrackPlaybackDetails_context @unmask(mode: "migrate") - } device { id name @@ -76,7 +73,6 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` url } } - ...TrackPlaybackDetails_track } ... on Episode { show { @@ -92,6 +88,7 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` } ...PlaybackItemProgressBar_playbackState + ...TrackPlaybackDetails_playbackState } `; @@ -119,11 +116,8 @@ const Playbar = () => {
- {playbackItem?.__typename === 'Track' ? ( - + {playbackState && playbackItem?.__typename === 'Track' ? ( + ) : playbackItem?.__typename === 'Episode' ? ( ) : null} diff --git a/client/src/components/TrackPlaybackDetails.tsx b/client/src/components/TrackPlaybackDetails.tsx index 941683e2..d6dc70f0 100644 --- a/client/src/components/TrackPlaybackDetails.tsx +++ b/client/src/components/TrackPlaybackDetails.tsx @@ -5,11 +5,8 @@ import { useFragment, } from '@apollo/client'; import { - TrackPlaybackDetails_context as Context, - TrackPlaybackDetails_track as Track, PlaybackContextType, - TrackPlaybackDetails_context, - TrackPlaybackDetails_track, + TrackPlaybackDetails_playbackState, } from '../types/api'; import ContextMenuAction from './ContextMenuAction'; import ContextMenu from './ContextMenu'; @@ -20,32 +17,58 @@ import { parseSpotifyIDFromURI } from '../utils/spotify'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface TrackPlaybackDetailsProps { - context: Context | null; - track: FragmentType; + playbackState: FragmentType; } -const TrackPlaybackDetails = ({ - context, - track, -}: TrackPlaybackDetailsProps) => { - const { data: trackData, complete } = useFragment({ - fragment: TrackPlaybackDetailsTrackFragment, - from: track, +const TrackPlaybackDetailsFragment: TypedDocumentNode = gql` + fragment TrackPlaybackDetails_playbackState on PlaybackState { + context { + uri + type + } + item { + id + ... on Track { + id + name + uri + album { + id + name + } + artists { + id + uri + name + } + } + } + } +`; + +fragmentRegistry.register(TrackPlaybackDetailsFragment); + +const TrackPlaybackDetails = ({ playbackState }: TrackPlaybackDetailsProps) => { + const { data, complete } = useFragment({ + fragment: TrackPlaybackDetailsFragment, + from: playbackState, }); - if (!complete) { + if (!complete || data.item?.__typename !== 'Track') { return null; } + const { context, item: track } = data; + return ( - + - - + + Go to album @@ -53,29 +76,27 @@ const TrackPlaybackDetails = ({ <> )} - } + content={} > Share - + } > - - {trackData.name} + + {track.name} - {trackData.artists.map((artist) => ( + {track.artists.map((artist) => ( = gql` - fragment TrackPlaybackDetails_context on PlaybackContext { - uri - type - } -`; - -const TrackPlaybackDetailsTrackFragment: TypedDocumentNode = gql` - fragment TrackPlaybackDetails_track on Track { - id - name - uri - album { - id - name - } - artists { - id - uri - name - } - } -`; - -fragmentRegistry.register( - TrackPlaybackDetailsContextFragment, - TrackPlaybackDetailsTrackFragment -); - export default TrackPlaybackDetails; diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 3e5cd90b..dcb2d41d 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2648,17 +2648,7 @@ export type PlaybackStateFragment = ({ repeatState: RepeatMode; shuffleState: boolean; actions: { __typename: 'Actions'; disallows: Array }; - context: - | ({ - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } & { - ' $fragmentRefs'?: { - TrackPlaybackDetails_context: TrackPlaybackDetails_context; - }; - }) - | null; + context: { __typename: 'PlaybackContext'; uri: string } | null; device: { __typename: 'Device'; id: string | null; @@ -2693,7 +2683,6 @@ export type PlaybackStateFragment = ({ }; } & { ' $fragmentRefs'?: { - TrackPlaybackDetails_track: TrackPlaybackDetails_track; LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; }; }) @@ -2702,6 +2691,7 @@ export type PlaybackStateFragment = ({ ' $fragmentRefs'?: { Playbar_playbackState: Playbar_playbackState; PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; + TrackPlaybackDetails_playbackState: TrackPlaybackDetails_playbackState; }; }) & { ' $fragmentName'?: 'PlaybackStateFragment' }; @@ -2721,17 +2711,7 @@ export type PlaybackStateSubscriberQuery = { repeatState: RepeatMode; shuffleState: boolean; actions: { __typename: 'Actions'; disallows: Array }; - context: - | ({ - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } & { - ' $fragmentRefs'?: { - TrackPlaybackDetails_context: TrackPlaybackDetails_context; - }; - }) - | null; + context: { __typename: 'PlaybackContext'; uri: string } | null; device: { __typename: 'Device'; id: string | null; @@ -2766,7 +2746,6 @@ export type PlaybackStateSubscriberQuery = { }; } & { ' $fragmentRefs'?: { - TrackPlaybackDetails_track: TrackPlaybackDetails_track; LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; }; }) @@ -2776,6 +2755,7 @@ export type PlaybackStateSubscriberQuery = { PlaybackStateFragment: PlaybackStateFragment; Playbar_playbackState: Playbar_playbackState; PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; + TrackPlaybackDetails_playbackState: TrackPlaybackDetails_playbackState; }; }) | null; @@ -2795,17 +2775,7 @@ export type PlaybackStateSubscriberSubscription = { repeatState: RepeatMode; shuffleState: boolean; actions: { __typename: 'Actions'; disallows: Array }; - context: - | ({ - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } & { - ' $fragmentRefs'?: { - TrackPlaybackDetails_context: TrackPlaybackDetails_context; - }; - }) - | null; + context: { __typename: 'PlaybackContext'; uri: string } | null; device: { __typename: 'Device'; id: string | null; @@ -2840,7 +2810,6 @@ export type PlaybackStateSubscriberSubscription = { }; } & { ' $fragmentRefs'?: { - TrackPlaybackDetails_track: TrackPlaybackDetails_track; LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; }; }) @@ -2850,6 +2819,7 @@ export type PlaybackStateSubscriberSubscription = { PlaybackStateFragment: PlaybackStateFragment; Playbar_playbackState: Playbar_playbackState; PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; + TrackPlaybackDetails_playbackState: TrackPlaybackDetails_playbackState; }; }) | null; @@ -2872,17 +2842,6 @@ export type Playbar_playbackState = ({ repeatState: RepeatMode; shuffleState: boolean; actions: { __typename: 'Actions'; disallows: Array }; - context: - | ({ - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } & { - ' $fragmentRefs'?: { - TrackPlaybackDetails_context: TrackPlaybackDetails_context; - }; - }) - | null; device: { __typename: 'Device'; id: string | null; @@ -2917,7 +2876,6 @@ export type Playbar_playbackState = ({ }; } & { ' $fragmentRefs'?: { - TrackPlaybackDetails_track: TrackPlaybackDetails_track; LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; }; }) @@ -2925,6 +2883,7 @@ export type Playbar_playbackState = ({ } & { ' $fragmentRefs'?: { PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; + TrackPlaybackDetails_playbackState: TrackPlaybackDetails_playbackState; }; }) & { ' $fragmentName'?: 'Playbar_playbackState' }; @@ -3035,25 +2994,30 @@ export type TrackNumberCell_track = { trackNumber: number | null; } & { ' $fragmentName'?: 'TrackNumberCell_track' }; -export type TrackPlaybackDetails_context = { - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; -} & { ' $fragmentName'?: 'TrackPlaybackDetails_context' }; - -export type TrackPlaybackDetails_track = { - __typename: 'Track'; - id: string; - name: string; - uri: string; - album: { __typename: 'Album'; id: string; name: string }; - artists: Array<{ - __typename: 'Artist'; - id: string; +export type TrackPlaybackDetails_playbackState = { + __typename: 'PlaybackState'; + context: { + __typename: 'PlaybackContext'; uri: string; - name: string; - }>; -} & { ' $fragmentName'?: 'TrackPlaybackDetails_track' }; + type: PlaybackContextType; + } | null; + item: + | { __typename: 'Episode'; id: string } + | { + __typename: 'Track'; + id: string; + name: string; + uri: string; + album: { __typename: 'Album'; id: string; name: string }; + artists: Array<{ + __typename: 'Artist'; + id: string; + uri: string; + name: string; + }>; + } + | null; +} & { ' $fragmentName'?: 'TrackPlaybackDetails_playbackState' }; export type TrackTitleCell_playbackState = { __typename: 'PlaybackState'; From 1c696953dd5f3a0d148b32d21ff509c92d632d2b Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 14:02:47 -0700 Subject: [PATCH 22/64] Update PlaylistSidebarLink to use data masking --- client/src/components/LoggedInLayout.tsx | 2 +- client/src/components/PlaylistSidebarLink.tsx | 68 ++++++++++++------- client/src/types/api.ts | 3 - 3 files changed, 43 insertions(+), 30 deletions(-) diff --git a/client/src/components/LoggedInLayout.tsx b/client/src/components/LoggedInLayout.tsx index 81f0de13..9852ff36 100644 --- a/client/src/components/LoggedInLayout.tsx +++ b/client/src/components/LoggedInLayout.tsx @@ -102,7 +102,7 @@ const SIDEBAR_QUERY: TypedDocumentNode< images { url } - ...PlaylistSidebarLink_playlist @unmask(mode: "migrate") + ...PlaylistSidebarLink_playlist } } } diff --git a/client/src/components/PlaylistSidebarLink.tsx b/client/src/components/PlaylistSidebarLink.tsx index aee5e9cd..c2cfb428 100644 --- a/client/src/components/PlaylistSidebarLink.tsx +++ b/client/src/components/PlaylistSidebarLink.tsx @@ -1,12 +1,17 @@ import { ReactElement, cloneElement } from 'react'; -import { gql, TypedDocumentNode, useFragment } from '@apollo/client'; +import { + FragmentType, + gql, + TypedDocumentNode, + useFragment, +} from '@apollo/client'; import { Volume2, Pin } from 'lucide-react'; import { NavLink } from 'react-router-dom'; import ContextMenu from './ContextMenu'; import { - PlaylistSidebarLink_playlist as Playlist, PlaylistSidebarLink_playbackState as PlaybackState, PlaylistSidebarLink_currentUser, + PlaylistSidebarLink_playlist, } from '../types/api'; import cx from 'classnames'; import ContextMenuAction from './ContextMenuAction'; @@ -15,12 +20,12 @@ import usePlaybackState from '../hooks/usePlaybackState'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface PlaylistSidebarLinkProps { - playlist: Playlist; + playlist: FragmentType; coverPhoto: ReactElement<{ size: string }>; to: string; pinned: boolean; - onClickEdit?: (playlist: Playlist) => void; - onMouseOverEdit?: (playlist: Playlist) => void; + onClickEdit?: (playlist: PlaylistSidebarLink_playlist) => void; + onMouseOverEdit?: (playlist: PlaylistSidebarLink_playlist) => void; } const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` @@ -40,6 +45,20 @@ const CURRENT_USER_FRAGMENT: TypedDocumentNode } `; +const PlaylistSidebarLinkFragment: TypedDocumentNode = gql` + fragment PlaylistSidebarLink_playlist on Playlist { + id + uri + name + owner { + id + displayName + } + } +`; + +fragmentRegistry.register(PlaylistSidebarLinkFragment); + const PlaylistSidebarLink = ({ coverPhoto, playlist, @@ -52,33 +71,42 @@ const PlaylistSidebarLink = ({ fragment: PLAYBACK_STATE_FRAGMENT, }); - const { data } = useFragment({ + const { data: currentUser } = useFragment({ fragment: CURRENT_USER_FRAGMENT, from: { __typename: 'CurrentUser' }, }); - const isCurrentContext = playlist.uri === playbackState?.context?.uri; - const isOwner = playlist.owner.id === data.profile?.id; + const { data, complete } = useFragment({ + fragment: PlaylistSidebarLinkFragment, + from: playlist, + }); + + if (!complete) { + return null; + } + + const isCurrentContext = data.uri === playbackState?.context?.uri; + const isOwner = data.owner.id === currentUser.profile?.id; return ( } + content={} > Share {isOwner && ( onMouseOverEdit?.(playlist)} - onSelect={() => onClickEdit?.(playlist)} + onMouseOver={() => onMouseOverEdit?.(data)} + onSelect={() => onClickEdit?.(data)} > Edit details )} - + } > @@ -103,7 +131,7 @@ const PlaylistSidebarLink = ({ { 'text-theme-light': isCurrentContext } )} > - {playlist.name} + {data.name}
{pinned && ( @@ -116,7 +144,7 @@ const PlaylistSidebarLink = ({ )} Playlist - {playlist.owner.displayName} + {data.owner.displayName}
@@ -130,16 +158,4 @@ const PlaylistSidebarLink = ({ ); }; -fragmentRegistry.register(gql` - fragment PlaylistSidebarLink_playlist on Playlist { - id - uri - name - owner { - id - displayName - } - } -`); - export default PlaylistSidebarLink; diff --git a/client/src/types/api.ts b/client/src/types/api.ts index dcb2d41d..98bd9333 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2612,10 +2612,7 @@ export type SidebarQuery = { node: { __typename: 'Playlist'; id: string; - uri: string; - name: string; images: Array<{ __typename: 'Image'; url: string }> | null; - owner: { __typename: 'User'; id: string; displayName: string | null }; } & { ' $fragmentRefs'?: { PlaylistSidebarLink_playlist: PlaylistSidebarLink_playlist; From 97e471f5a8d61e917c081f8d94896d768402bbfa Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 15:44:56 -0700 Subject: [PATCH 23/64] Temp upgrade to useFragment with null support --- client/package.json | 2 +- package-lock.json | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/client/package.json b/client/package.json index a4876b1e..d8515dc5 100644 --- a/client/package.json +++ b/client/package.json @@ -6,7 +6,7 @@ "node": ">=18" }, "dependencies": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12130", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12131", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", diff --git a/package-lock.json b/package-lock.json index b6e84076..1ce5ee01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "client": { "version": "0.1.0", "dependencies": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12130", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12131", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", @@ -110,8 +110,8 @@ }, "client/node_modules/@apollo/client": { "version": "3.12.0-rc.0", - "resolved": "https://pkg.pr.new/@apollo/client@12130", - "integrity": "sha512-UyVVdU74IQRoWwH8IneN8IsRkJYzpQNnQ3V2npIwazzom9fDBk46phuNqyYJ8cbS9okbcikT1TSBJCwiVn3XLA==", + "resolved": "https://pkg.pr.new/@apollo/client@12131", + "integrity": "sha512-tkD/n8ab+0TVsDoVDiygzx15KlCQZeYT9RWiqQx3DwNn181RMsGp+RB38k2bVVKBrsgB8x0006y58ocyMI9PWw==", "license": "MIT", "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", @@ -24868,7 +24868,7 @@ "client": { "version": "file:client", "requires": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12130", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12131", "@apollo/persisted-query-lists": "^1.0.0", "@apollo/rover": "^0.16.2", "@mdx-js/rollup": "^2.3.0", @@ -24925,8 +24925,8 @@ }, "dependencies": { "@apollo/client": { - "version": "https://pkg.pr.new/@apollo/client@12130", - "integrity": "sha512-UyVVdU74IQRoWwH8IneN8IsRkJYzpQNnQ3V2npIwazzom9fDBk46phuNqyYJ8cbS9okbcikT1TSBJCwiVn3XLA==", + "version": "https://pkg.pr.new/@apollo/client@12131", + "integrity": "sha512-tkD/n8ab+0TVsDoVDiygzx15KlCQZeYT9RWiqQx3DwNn181RMsGp+RB38k2bVVKBrsgB8x0006y58ocyMI9PWw==", "requires": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", From 282d5a3aa328de4486a807b5b745762603b7eb38 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 15:53:14 -0700 Subject: [PATCH 24/64] Revert to original PlaybackItemProgressBar implementation --- .../components/PlaybackItemProgressBar.tsx | 74 +++++-------------- 1 file changed, 17 insertions(+), 57 deletions(-) diff --git a/client/src/components/PlaybackItemProgressBar.tsx b/client/src/components/PlaybackItemProgressBar.tsx index e9b938b8..27a0d6ec 100644 --- a/client/src/components/PlaybackItemProgressBar.tsx +++ b/client/src/components/PlaybackItemProgressBar.tsx @@ -1,9 +1,4 @@ -import { - FragmentType, - TypedDocumentNode, - gql, - useFragment, -} from '@apollo/client'; +import { gql } from '@apollo/client'; import Flex from './Flex'; import ProgressBar from './ProgressBar'; import Duration from './Duration'; @@ -13,62 +8,15 @@ import useSeekToPositionMutation from '../mutations/useSeekToPositionMutation'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface PlaybackItemProgressBarProps { - playbackState: FragmentType | null | undefined; + playbackState: PlaybackState | null | undefined; } -const PlaybackItemProgressBarFragment: TypedDocumentNode = gql` - fragment PlaybackItemProgressBar_playbackState on PlaybackState { - isPlaying - progressMs - timestamp - item { - id - durationMs - } - } -`; - -fragmentRegistry.register(PlaybackItemProgressBarFragment); - const PlaybackItemProgressBar = ({ playbackState, }: PlaybackItemProgressBarProps) => { - return playbackState ? ( - - ) : ( - - ); -}; - -function Placeholder() { - return ( - - - - - - - - - - ); -} - -interface CurrentPlaybackProps { - playbackState: FragmentType; -} - -function CurrentPlayback({ playbackState }: CurrentPlaybackProps) { - const { data, complete } = useFragment({ - fragment: PlaybackItemProgressBarFragment, - from: playbackState, - }); - - const playbackItem = data?.item; + const playbackItem = playbackState?.item; const durationMs = playbackItem?.durationMs ?? 0; - const progressMs = usePlaybackProgress(complete ? data : null, { - max: durationMs, - }); + const progressMs = usePlaybackProgress(playbackState, { max: durationMs }); const [seekToPosition] = useSeekToPositionMutation(); return ( @@ -90,6 +38,18 @@ function CurrentPlayback({ playbackState }: CurrentPlaybackProps) { ); -} +}; + +fragmentRegistry.register(gql` + fragment PlaybackItemProgressBar_playbackState on PlaybackState { + isPlaying + progressMs + timestamp + item { + id + durationMs + } + } +`); export default PlaybackItemProgressBar; From c630fa9d76cc0e3b4e36fca7b261fb46e4837e66 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 15:53:47 -0700 Subject: [PATCH 25/64] Add data masking to PlaybackItemProgressBar --- .../components/PlaybackItemProgressBar.tsx | 46 ++++++++++++------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/client/src/components/PlaybackItemProgressBar.tsx b/client/src/components/PlaybackItemProgressBar.tsx index 27a0d6ec..928043ad 100644 --- a/client/src/components/PlaybackItemProgressBar.tsx +++ b/client/src/components/PlaybackItemProgressBar.tsx @@ -1,4 +1,9 @@ -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import Flex from './Flex'; import ProgressBar from './ProgressBar'; import Duration from './Duration'; @@ -8,15 +13,36 @@ import useSeekToPositionMutation from '../mutations/useSeekToPositionMutation'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface PlaybackItemProgressBarProps { - playbackState: PlaybackState | null | undefined; + playbackState: FragmentType | null; } +const PlaybackItemProgressBarFragment: TypedDocumentNode = gql` + fragment PlaybackItemProgressBar_playbackState on PlaybackState { + isPlaying + progressMs + timestamp + item { + id + durationMs + } + } +`; + +fragmentRegistry.register(PlaybackItemProgressBarFragment); + const PlaybackItemProgressBar = ({ playbackState, }: PlaybackItemProgressBarProps) => { - const playbackItem = playbackState?.item; + const { data, complete } = useFragment({ + fragment: PlaybackItemProgressBarFragment, + from: playbackState, + }); + + const playbackItem = data?.item; const durationMs = playbackItem?.durationMs ?? 0; - const progressMs = usePlaybackProgress(playbackState, { max: durationMs }); + const progressMs = usePlaybackProgress(complete ? data : null, { + max: durationMs, + }); const [seekToPosition] = useSeekToPositionMutation(); return ( @@ -40,16 +66,4 @@ const PlaybackItemProgressBar = ({ ); }; -fragmentRegistry.register(gql` - fragment PlaybackItemProgressBar_playbackState on PlaybackState { - isPlaying - progressMs - timestamp - item { - id - durationMs - } - } -`); - export default PlaybackItemProgressBar; From fe620771b477f035b28fd65b50959953163dc98b Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 17:36:12 -0700 Subject: [PATCH 26/64] Combine EpisodePlaybackDetails and TrackPlaybackDetails into single component --- .../src/components/EpisodePlaybackDetails.tsx | 35 -------- ...ackDetails.tsx => PlaybackItemDetails.tsx} | 74 ++++++++++------ client/src/components/Playbar.tsx | 12 +-- client/src/types/api.ts | 87 +++++++++---------- 4 files changed, 90 insertions(+), 118 deletions(-) delete mode 100644 client/src/components/EpisodePlaybackDetails.tsx rename client/src/components/{TrackPlaybackDetails.tsx => PlaybackItemDetails.tsx} (59%) diff --git a/client/src/components/EpisodePlaybackDetails.tsx b/client/src/components/EpisodePlaybackDetails.tsx deleted file mode 100644 index 90fac67a..00000000 --- a/client/src/components/EpisodePlaybackDetails.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { gql } from '@apollo/client'; -import { EpisodePlaybackDetails_episode as Episode } from '../types/api'; -import EntityLink from './EntityLink'; -import Flex from './Flex'; -import { fragmentRegistry } from '../apollo/fragmentRegistry'; - -interface EpisodePlaybackDetailsProps { - episode: Episode; -} - -const EpisodePlaybackDetails = ({ episode }: EpisodePlaybackDetailsProps) => { - return ( - - - {episode.name} - - - {episode.show.name} - - - ); -}; - -fragmentRegistry.register(gql` - fragment EpisodePlaybackDetails_episode on Episode { - id - name - show { - id - name - } - } -`); - -export default EpisodePlaybackDetails; diff --git a/client/src/components/TrackPlaybackDetails.tsx b/client/src/components/PlaybackItemDetails.tsx similarity index 59% rename from client/src/components/TrackPlaybackDetails.tsx rename to client/src/components/PlaybackItemDetails.tsx index d6dc70f0..6377b177 100644 --- a/client/src/components/TrackPlaybackDetails.tsx +++ b/client/src/components/PlaybackItemDetails.tsx @@ -6,22 +6,21 @@ import { } from '@apollo/client'; import { PlaybackContextType, - TrackPlaybackDetails_playbackState, + PlaybackItemDetails_playbackState, } from '../types/api'; -import ContextMenuAction from './ContextMenuAction'; -import ContextMenu from './ContextMenu'; -import DelimitedList from './DelimitedList'; import EntityLink from './EntityLink'; -import Flex from './Flex'; +import ContextMenu from './ContextMenu'; +import ContextMenuAction from './ContextMenuAction'; import { parseSpotifyIDFromURI } from '../utils/spotify'; +import DelimitedList from './DelimitedList'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; -interface TrackPlaybackDetailsProps { - playbackState: FragmentType; +interface PlaybackItemDetailsProps { + playbackState: FragmentType | null; } -const TrackPlaybackDetailsFragment: TypedDocumentNode = gql` - fragment TrackPlaybackDetails_playbackState on PlaybackState { +const PlaybackItemDetailsFragment: TypedDocumentNode = gql` + fragment PlaybackItemDetails_playbackState on PlaybackState { context { uri type @@ -42,33 +41,56 @@ const TrackPlaybackDetailsFragment: TypedDocumentNode { +const PlaybackItemDetails = ({ playbackState }: PlaybackItemDetailsProps) => { const { data, complete } = useFragment({ - fragment: TrackPlaybackDetailsFragment, + fragment: PlaybackItemDetailsFragment, from: playbackState, }); - if (!complete || data.item?.__typename !== 'Track') { + if (!complete || !data.item) { return null; } - const { context, item: track } = data; + const { context, item } = data; + + if (item.__typename === 'Episode') { + return ( +
+ + {item.name} + + + {item.show.name} + +
+ ); + } return ( - +
- + - - + + Go to album @@ -76,27 +98,27 @@ const TrackPlaybackDetails = ({ playbackState }: TrackPlaybackDetailsProps) => { <> )} } + content={} > Share - + } > - - {track.name} + + {item.name} - {track.artists.map((artist) => ( + {item.artists.map((artist) => ( { ))} - +
); }; -export default TrackPlaybackDetails; +export default PlaybackItemDetails; diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index 8e85907a..2514275b 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -13,8 +13,6 @@ import PlayButton from './PlayButton'; import DeviceIcon from './DeviceIcon'; import DevicePopover from './DevicePopover'; import Flex from './Flex'; -import EpisodePlaybackDetails from './EpisodePlaybackDetails'; -import TrackPlaybackDetails from './TrackPlaybackDetails'; import MuteControl from './MuteControl'; import LikeControl from './LikeControl'; import PlaybarControlButton from './PlaybarControlButton'; @@ -33,6 +31,7 @@ import { fragmentRegistry } from '../apollo/fragmentRegistry'; import Skeleton from './Skeleton'; import LikeButton from './LikeButton'; import { withHighlight } from './LoadingStateHighlighter'; +import PlaybackItemDetails from './PlaybackItemDetails'; const EPISODE_SKIP_FORWARD_AMOUNT = 15_000; @@ -81,14 +80,13 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` url } } - ...EpisodePlaybackDetails_episode @unmask(mode: "migrate") } ...LikeControl_playbackItem @unmask(mode: "migrate") } ...PlaybackItemProgressBar_playbackState - ...TrackPlaybackDetails_playbackState + ...PlaybackItemDetails_playbackState } `; @@ -116,11 +114,7 @@ const Playbar = () => {
- {playbackState && playbackItem?.__typename === 'Track' ? ( - - ) : playbackItem?.__typename === 'Episode' ? ( - - ) : null} + {playbackState && ( )} diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 98bd9333..3c123e43 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2527,13 +2527,6 @@ export type EpisodeDetailsCell_episode = { }; } & { ' $fragmentName'?: 'EpisodeDetailsCell_episode' }; -export type EpisodePlaybackDetails_episode = { - __typename: 'Episode'; - id: string; - name: string; - show: { __typename: 'Show'; id: string; name: string }; -} & { ' $fragmentName'?: 'EpisodePlaybackDetails_episode' }; - export type EpisodeRemainingDuration_episode = { __typename: 'Episode'; id: string; @@ -2628,6 +2621,41 @@ export type NotificationManager_playbackState = { device: { __typename: 'Device'; id: string | null }; } & { ' $fragmentName'?: 'NotificationManager_playbackState' }; +export type PlaybackItemDetails_playbackState = { + __typename: 'PlaybackState'; + context: { + __typename: 'PlaybackContext'; + uri: string; + type: PlaybackContextType; + } | null; + item: + | { + __typename: 'Episode'; + name: string; + id: string; + show: { + __typename: 'Show'; + id: string; + name: string; + images: Array<{ __typename: 'Image'; url: string }>; + }; + } + | { + __typename: 'Track'; + id: string; + name: string; + uri: string; + album: { __typename: 'Album'; id: string; name: string }; + artists: Array<{ + __typename: 'Artist'; + id: string; + uri: string; + name: string; + }>; + } + | null; +} & { ' $fragmentName'?: 'PlaybackItemDetails_playbackState' }; + export type PlaybackItemProgressBar_playbackState = { __typename: 'PlaybackState'; isPlaying: boolean; @@ -2657,16 +2685,13 @@ export type PlaybackStateFragment = ({ | ({ __typename: 'Episode'; id: string; - name: string; show: { __typename: 'Show'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; } & { ' $fragmentRefs'?: { - EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; }; }) @@ -2688,7 +2713,7 @@ export type PlaybackStateFragment = ({ ' $fragmentRefs'?: { Playbar_playbackState: Playbar_playbackState; PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; - TrackPlaybackDetails_playbackState: TrackPlaybackDetails_playbackState; + PlaybackItemDetails_playbackState: PlaybackItemDetails_playbackState; }; }) & { ' $fragmentName'?: 'PlaybackStateFragment' }; @@ -2720,16 +2745,13 @@ export type PlaybackStateSubscriberQuery = { | ({ __typename: 'Episode'; id: string; - name: string; show: { __typename: 'Show'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; } & { ' $fragmentRefs'?: { - EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; }; }) @@ -2752,7 +2774,7 @@ export type PlaybackStateSubscriberQuery = { PlaybackStateFragment: PlaybackStateFragment; Playbar_playbackState: Playbar_playbackState; PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; - TrackPlaybackDetails_playbackState: TrackPlaybackDetails_playbackState; + PlaybackItemDetails_playbackState: PlaybackItemDetails_playbackState; }; }) | null; @@ -2784,16 +2806,13 @@ export type PlaybackStateSubscriberSubscription = { | ({ __typename: 'Episode'; id: string; - name: string; show: { __typename: 'Show'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; } & { ' $fragmentRefs'?: { - EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; }; }) @@ -2816,7 +2835,7 @@ export type PlaybackStateSubscriberSubscription = { PlaybackStateFragment: PlaybackStateFragment; Playbar_playbackState: Playbar_playbackState; PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; - TrackPlaybackDetails_playbackState: TrackPlaybackDetails_playbackState; + PlaybackItemDetails_playbackState: PlaybackItemDetails_playbackState; }; }) | null; @@ -2850,16 +2869,13 @@ export type Playbar_playbackState = ({ | ({ __typename: 'Episode'; id: string; - name: string; show: { __typename: 'Show'; id: string; - name: string; images: Array<{ __typename: 'Image'; url: string }>; }; } & { ' $fragmentRefs'?: { - EpisodePlaybackDetails_episode: EpisodePlaybackDetails_episode; LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; }; }) @@ -2880,7 +2896,7 @@ export type Playbar_playbackState = ({ } & { ' $fragmentRefs'?: { PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; - TrackPlaybackDetails_playbackState: TrackPlaybackDetails_playbackState; + PlaybackItemDetails_playbackState: PlaybackItemDetails_playbackState; }; }) & { ' $fragmentName'?: 'Playbar_playbackState' }; @@ -2991,31 +3007,6 @@ export type TrackNumberCell_track = { trackNumber: number | null; } & { ' $fragmentName'?: 'TrackNumberCell_track' }; -export type TrackPlaybackDetails_playbackState = { - __typename: 'PlaybackState'; - context: { - __typename: 'PlaybackContext'; - uri: string; - type: PlaybackContextType; - } | null; - item: - | { __typename: 'Episode'; id: string } - | { - __typename: 'Track'; - id: string; - name: string; - uri: string; - album: { __typename: 'Album'; id: string; name: string }; - artists: Array<{ - __typename: 'Artist'; - id: string; - uri: string; - name: string; - }>; - } - | null; -} & { ' $fragmentName'?: 'TrackPlaybackDetails_playbackState' }; - export type TrackTitleCell_playbackState = { __typename: 'PlaybackState'; context: { __typename: 'PlaybackContext'; uri: string } | null; From 65b835979e0b62cd4842819030f8f1d0a2f1a492 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 17:37:43 -0700 Subject: [PATCH 27/64] Select devices in Playbar to fix typescript issue --- client/src/components/Playbar.tsx | 4 +++- client/src/types/api.ts | 7 ++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index 2514275b..d6f1a1f3 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -42,6 +42,9 @@ const PLAYBAR_QUERY: TypedDocumentNode< query PlaybarQuery { me { player { + devices { + id + } ...DevicePopover_player } } @@ -64,7 +67,6 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` } item { id - ... on Track { album { id diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 3c123e43..7ece744a 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2846,9 +2846,10 @@ export type PlaybarQueryVariables = Exact<{ [key: string]: never }>; export type PlaybarQuery = { me: { __typename: 'CurrentUser'; - player: { __typename: 'Player' } & { - ' $fragmentRefs'?: { DevicePopover_player: DevicePopover_player }; - }; + player: { + __typename: 'Player'; + devices: Array<{ __typename: 'Device'; id: string | null }> | null; + } & { ' $fragmentRefs'?: { DevicePopover_player: DevicePopover_player } }; } | null; }; From ca313ecf5ffce329b9574eebb3d5eb1956749ad8 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 17:38:48 -0700 Subject: [PATCH 28/64] Select progressMs from Playbar --- client/src/components/Playbar.tsx | 1 + client/src/types/api.ts | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index d6f1a1f3..e2ddca36 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -56,6 +56,7 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` isPlaying repeatState shuffleState + progressMs actions { disallows } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 7ece744a..feebea5a 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2672,6 +2672,7 @@ export type PlaybackStateFragment = ({ isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; + progressMs: number | null; actions: { __typename: 'Actions'; disallows: Array }; context: { __typename: 'PlaybackContext'; uri: string } | null; device: { @@ -2732,6 +2733,7 @@ export type PlaybackStateSubscriberQuery = { isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; + progressMs: number | null; actions: { __typename: 'Actions'; disallows: Array }; context: { __typename: 'PlaybackContext'; uri: string } | null; device: { @@ -2793,6 +2795,7 @@ export type PlaybackStateSubscriberSubscription = { isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; + progressMs: number | null; actions: { __typename: 'Actions'; disallows: Array }; context: { __typename: 'PlaybackContext'; uri: string } | null; device: { @@ -2858,6 +2861,7 @@ export type Playbar_playbackState = ({ isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; + progressMs: number | null; actions: { __typename: 'Actions'; disallows: Array }; device: { __typename: 'Device'; From 952a2d04005f687800eabb1c405eaf815d219a26 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 17:45:47 -0700 Subject: [PATCH 29/64] Update LikeControl to use data masking --- client/src/components/LikeControl.tsx | 27 ++++++++++++++++++++------- client/src/components/Playbar.tsx | 2 +- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/client/src/components/LikeControl.tsx b/client/src/components/LikeControl.tsx index 36eb5548..aee5e259 100644 --- a/client/src/components/LikeControl.tsx +++ b/client/src/components/LikeControl.tsx @@ -1,4 +1,10 @@ -import { gql, useSuspenseQuery } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, + useSuspenseQuery, +} from '@apollo/client'; import { LikeControlQuery, LikeControlQueryVariables, @@ -12,7 +18,7 @@ import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface LikeControlProps { className?: LikeButtonProps['className']; - playbackItem: PlaybackItem | null; + playbackItem: FragmentType | null; size?: LikeButtonProps['size']; } @@ -25,15 +31,22 @@ const LIKE_CONTROL_QUERY = gql` } `; -fragmentRegistry.register(gql` +const LikeControlFragment: TypedDocumentNode = gql` fragment LikeControl_playbackItem on PlaybackItem { __typename id } -`); +`; + +fragmentRegistry.register(LikeControlFragment); const LikeControl = ({ className, playbackItem, size }: LikeControlProps) => { - const deferredId = useDeferredValue(playbackItem?.id); + const { data: playbackItemData, complete } = useFragment({ + fragment: LikeControlFragment, + from: playbackItem, + }); + + const deferredId = useDeferredValue(playbackItemData?.id); const { data } = useSuspenseQuery< LikeControlQuery, @@ -66,11 +79,11 @@ const LikeControl = ({ className, playbackItem, size }: LikeControlProps) => { size={size} liked={isLiked} onClick={() => { - if (!playbackItem) { + if (!complete) { return; } - const ids = [playbackItem.id]; + const ids = [playbackItemData.id]; isLiked ? removeTracks({ ids }) : saveTracks({ ids }); }} diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index e2ddca36..e9907fd0 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -85,7 +85,7 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` } } - ...LikeControl_playbackItem @unmask(mode: "migrate") + ...LikeControl_playbackItem } ...PlaybackItemProgressBar_playbackState From 2fe70d2b9092d03d2342a8a51358cd6a3f0b31bc Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 17:48:06 -0700 Subject: [PATCH 30/64] Pass playbackItemId to LikeControl instead of using fragment --- client/src/components/LikeControl.tsx | 39 +++----------- client/src/components/Playbar.tsx | 4 +- client/src/types/api.ts | 77 ++++++--------------------- 3 files changed, 24 insertions(+), 96 deletions(-) diff --git a/client/src/components/LikeControl.tsx b/client/src/components/LikeControl.tsx index aee5e259..230dd677 100644 --- a/client/src/components/LikeControl.tsx +++ b/client/src/components/LikeControl.tsx @@ -1,24 +1,13 @@ -import { - FragmentType, - TypedDocumentNode, - gql, - useFragment, - useSuspenseQuery, -} from '@apollo/client'; -import { - LikeControlQuery, - LikeControlQueryVariables, - LikeControl_playbackItem as PlaybackItem, -} from '../types/api'; +import { gql, useSuspenseQuery } from '@apollo/client'; +import { LikeControlQuery, LikeControlQueryVariables } from '../types/api'; import LikeButton, { LikeButtonProps } from './LikeButton'; import useSaveTracksMutation from '../mutations/useSaveTracksMutation'; import useRemoveTracksMutation from '../mutations/useRemoveSavedTracksMutation'; import { useDeferredValue } from 'react'; -import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface LikeControlProps { className?: LikeButtonProps['className']; - playbackItem: FragmentType | null; + playbackItemId: string | undefined; size?: LikeButtonProps['size']; } @@ -31,22 +20,8 @@ const LIKE_CONTROL_QUERY = gql` } `; -const LikeControlFragment: TypedDocumentNode = gql` - fragment LikeControl_playbackItem on PlaybackItem { - __typename - id - } -`; - -fragmentRegistry.register(LikeControlFragment); - -const LikeControl = ({ className, playbackItem, size }: LikeControlProps) => { - const { data: playbackItemData, complete } = useFragment({ - fragment: LikeControlFragment, - from: playbackItem, - }); - - const deferredId = useDeferredValue(playbackItemData?.id); +const LikeControl = ({ className, playbackItemId, size }: LikeControlProps) => { + const deferredId = useDeferredValue(playbackItemId); const { data } = useSuspenseQuery< LikeControlQuery, @@ -79,11 +54,11 @@ const LikeControl = ({ className, playbackItem, size }: LikeControlProps) => { size={size} liked={isLiked} onClick={() => { - if (!complete) { + if (!playbackItemId) { return; } - const ids = [playbackItemData.id]; + const ids = [playbackItemId]; isLiked ? removeTracks({ ids }) : saveTracks({ ids }); }} diff --git a/client/src/components/Playbar.tsx b/client/src/components/Playbar.tsx index e9907fd0..1cb5a0d9 100644 --- a/client/src/components/Playbar.tsx +++ b/client/src/components/Playbar.tsx @@ -84,8 +84,6 @@ const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` } } } - - ...LikeControl_playbackItem } ...PlaybackItemProgressBar_playbackState @@ -119,7 +117,7 @@ const Playbar = () => { {playbackState && ( - + )} diff --git a/client/src/types/api.ts b/client/src/types/api.ts index feebea5a..e9d11092 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2550,19 +2550,6 @@ export type LikeControlQuery = { } | null; }; -type LikeControl_playbackItem_Episode = { - __typename: 'Episode'; - id: string; -} & { ' $fragmentName'?: 'LikeControl_playbackItem_Episode' }; - -type LikeControl_playbackItem_Track = { __typename: 'Track'; id: string } & { - ' $fragmentName'?: 'LikeControl_playbackItem_Track'; -}; - -export type LikeControl_playbackItem = - | LikeControl_playbackItem_Episode - | LikeControl_playbackItem_Track; - export type LikedSongsTile_playbackState = { __typename: 'PlaybackState'; isPlaying: boolean; @@ -2683,7 +2670,7 @@ export type PlaybackStateFragment = ({ volumePercent: number; }; item: - | ({ + | { __typename: 'Episode'; id: string; show: { @@ -2691,12 +2678,8 @@ export type PlaybackStateFragment = ({ id: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } & { - ' $fragmentRefs'?: { - LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; - }; - }) - | ({ + } + | { __typename: 'Track'; id: string; album: { @@ -2704,11 +2687,7 @@ export type PlaybackStateFragment = ({ id: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } & { - ' $fragmentRefs'?: { - LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; - }; - }) + } | null; } & { ' $fragmentRefs'?: { @@ -2744,7 +2723,7 @@ export type PlaybackStateSubscriberQuery = { volumePercent: number; }; item: - | ({ + | { __typename: 'Episode'; id: string; show: { @@ -2752,12 +2731,8 @@ export type PlaybackStateSubscriberQuery = { id: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } & { - ' $fragmentRefs'?: { - LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; - }; - }) - | ({ + } + | { __typename: 'Track'; id: string; album: { @@ -2765,11 +2740,7 @@ export type PlaybackStateSubscriberQuery = { id: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } & { - ' $fragmentRefs'?: { - LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; - }; - }) + } | null; } & { ' $fragmentRefs'?: { @@ -2806,7 +2777,7 @@ export type PlaybackStateSubscriberSubscription = { volumePercent: number; }; item: - | ({ + | { __typename: 'Episode'; id: string; show: { @@ -2814,12 +2785,8 @@ export type PlaybackStateSubscriberSubscription = { id: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } & { - ' $fragmentRefs'?: { - LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; - }; - }) - | ({ + } + | { __typename: 'Track'; id: string; album: { @@ -2827,11 +2794,7 @@ export type PlaybackStateSubscriberSubscription = { id: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } & { - ' $fragmentRefs'?: { - LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; - }; - }) + } | null; } & { ' $fragmentRefs'?: { @@ -2871,7 +2834,7 @@ export type Playbar_playbackState = ({ volumePercent: number; }; item: - | ({ + | { __typename: 'Episode'; id: string; show: { @@ -2879,12 +2842,8 @@ export type Playbar_playbackState = ({ id: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } & { - ' $fragmentRefs'?: { - LikeControl_playbackItem_Episode: LikeControl_playbackItem_Episode; - }; - }) - | ({ + } + | { __typename: 'Track'; id: string; album: { @@ -2892,11 +2851,7 @@ export type Playbar_playbackState = ({ id: string; images: Array<{ __typename: 'Image'; url: string }>; }; - } & { - ' $fragmentRefs'?: { - LikeControl_playbackItem_Track: LikeControl_playbackItem_Track; - }; - }) + } | null; } & { ' $fragmentRefs'?: { From 9607a6679bf8ef553400284fca098d89638f61a6 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 18:28:32 -0700 Subject: [PATCH 31/64] Upgrade to another patch version --- client/package.json | 2 +- package-lock.json | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/client/package.json b/client/package.json index d8515dc5..c29a8df4 100644 --- a/client/package.json +++ b/client/package.json @@ -6,7 +6,7 @@ "node": ">=18" }, "dependencies": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12131", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12133", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", diff --git a/package-lock.json b/package-lock.json index 1ce5ee01..61405797 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "client": { "version": "0.1.0", "dependencies": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12131", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12133", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", @@ -110,8 +110,8 @@ }, "client/node_modules/@apollo/client": { "version": "3.12.0-rc.0", - "resolved": "https://pkg.pr.new/@apollo/client@12131", - "integrity": "sha512-tkD/n8ab+0TVsDoVDiygzx15KlCQZeYT9RWiqQx3DwNn181RMsGp+RB38k2bVVKBrsgB8x0006y58ocyMI9PWw==", + "resolved": "https://pkg.pr.new/@apollo/client@12133", + "integrity": "sha512-1U0asbS8mPttODnScnAZtc8OmOMPwXDMSbL+WOzR4Rf8sAYb6ONx/2kxe0vpk7FJ7u+fkULzCMYiiSa1VAQuHQ==", "license": "MIT", "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", @@ -24868,7 +24868,7 @@ "client": { "version": "file:client", "requires": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12131", + "@apollo/client": "https://pkg.pr.new/@apollo/client@12133", "@apollo/persisted-query-lists": "^1.0.0", "@apollo/rover": "^0.16.2", "@mdx-js/rollup": "^2.3.0", @@ -24925,8 +24925,8 @@ }, "dependencies": { "@apollo/client": { - "version": "https://pkg.pr.new/@apollo/client@12131", - "integrity": "sha512-tkD/n8ab+0TVsDoVDiygzx15KlCQZeYT9RWiqQx3DwNn181RMsGp+RB38k2bVVKBrsgB8x0006y58ocyMI9PWw==", + "version": "https://pkg.pr.new/@apollo/client@12133", + "integrity": "sha512-1U0asbS8mPttODnScnAZtc8OmOMPwXDMSbL+WOzR4Rf8sAYb6ONx/2kxe0vpk7FJ7u+fkULzCMYiiSa1VAQuHQ==", "requires": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", From 9b3acb52a5fc65b8a953e09b48da625122cda4ac Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 18:37:00 -0700 Subject: [PATCH 32/64] Remove unmask from PlaybackStateSubscriber --- .../components/PlaybackStateSubscriber.tsx | 24 +++-- client/src/types/api.ts | 99 ++----------------- 2 files changed, 23 insertions(+), 100 deletions(-) diff --git a/client/src/components/PlaybackStateSubscriber.tsx b/client/src/components/PlaybackStateSubscriber.tsx index 0e5cae7f..14cb6b78 100644 --- a/client/src/components/PlaybackStateSubscriber.tsx +++ b/client/src/components/PlaybackStateSubscriber.tsx @@ -1,7 +1,14 @@ import { useEffect } from 'react'; -import { ApolloError, gql, useSuspenseQuery } from '@apollo/client'; +import { + ApolloError, + TypedDocumentNode, + Unmasked, + gql, + useSuspenseQuery, +} from '@apollo/client'; import { PlaybackStateSubscriberQuery, + PlaybackStateSubscriberQueryVariables, PlaybackStateSubscriberSubscription, } from '../types/api'; import merge from 'deepmerge'; @@ -47,16 +54,19 @@ const PLAYBACK_STATE_FRAGMENT = gql` } } - ...Playbar_playbackState @unmask(mode: "migrate") + ...Playbar_playbackState } `; -const PLAYBACK_STATE_SUBSCRIBER_QUERY = gql` +const PLAYBACK_STATE_SUBSCRIBER_QUERY: TypedDocumentNode< + PlaybackStateSubscriberQuery, + PlaybackStateSubscriberQueryVariables +> = gql` query PlaybackStateSubscriberQuery { me { player { playbackState { - ...PlaybackStateFragment @unmask(mode: "migrate") + ...PlaybackStateFragment } } } @@ -68,7 +78,7 @@ const PLAYBACK_STATE_SUBSCRIBER_QUERY = gql` const PLAYBACK_STATE_SUBSCRIBER_SUBSCRIPTION = gql` subscription PlaybackStateSubscriberSubscription { playbackStateChanged { - ...PlaybackStateFragment @unmask(mode: "migrate") + ...PlaybackStateFragment } } @@ -76,9 +86,7 @@ const PLAYBACK_STATE_SUBSCRIBER_SUBSCRIPTION = gql` `; const PlaybackStateSubscriber = () => { - const { subscribeToMore } = useSuspenseQuery( - PLAYBACK_STATE_SUBSCRIBER_QUERY - ); + const { subscribeToMore } = useSuspenseQuery(PLAYBACK_STATE_SUBSCRIBER_QUERY); const navigate = useNavigate(); diff --git a/client/src/types/api.ts b/client/src/types/api.ts index e9d11092..c1d9d514 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2659,7 +2659,6 @@ export type PlaybackStateFragment = ({ isPlaying: boolean; repeatState: RepeatMode; shuffleState: boolean; - progressMs: number | null; actions: { __typename: 'Actions'; disallows: Array }; context: { __typename: 'PlaybackContext'; uri: string } | null; device: { @@ -2689,13 +2688,9 @@ export type PlaybackStateFragment = ({ }; } | null; -} & { - ' $fragmentRefs'?: { - Playbar_playbackState: Playbar_playbackState; - PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; - PlaybackItemDetails_playbackState: PlaybackItemDetails_playbackState; - }; -}) & { ' $fragmentName'?: 'PlaybackStateFragment' }; +} & { ' $fragmentRefs'?: { Playbar_playbackState: Playbar_playbackState } }) & { + ' $fragmentName'?: 'PlaybackStateFragment'; +}; export type PlaybackStateSubscriberQueryVariables = Exact<{ [key: string]: never; @@ -2707,48 +2702,8 @@ export type PlaybackStateSubscriberQuery = { player: { __typename: 'Player'; playbackState: - | ({ - __typename: 'PlaybackState'; - isPlaying: boolean; - repeatState: RepeatMode; - shuffleState: boolean; - progressMs: number | null; - actions: { __typename: 'Actions'; disallows: Array }; - context: { __typename: 'PlaybackContext'; uri: string } | null; - device: { - __typename: 'Device'; - id: string | null; - name: string; - type: string; - volumePercent: number; - }; - item: - | { - __typename: 'Episode'; - id: string; - show: { - __typename: 'Show'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } - | { - __typename: 'Track'; - id: string; - album: { - __typename: 'Album'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } - | null; - } & { - ' $fragmentRefs'?: { - PlaybackStateFragment: PlaybackStateFragment; - Playbar_playbackState: Playbar_playbackState; - PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; - PlaybackItemDetails_playbackState: PlaybackItemDetails_playbackState; - }; + | ({ __typename: 'PlaybackState' } & { + ' $fragmentRefs'?: { PlaybackStateFragment: PlaybackStateFragment }; }) | null; }; @@ -2761,48 +2716,8 @@ export type PlaybackStateSubscriberSubscriptionVariables = Exact<{ export type PlaybackStateSubscriberSubscription = { playbackStateChanged: - | ({ - __typename: 'PlaybackState'; - isPlaying: boolean; - repeatState: RepeatMode; - shuffleState: boolean; - progressMs: number | null; - actions: { __typename: 'Actions'; disallows: Array }; - context: { __typename: 'PlaybackContext'; uri: string } | null; - device: { - __typename: 'Device'; - id: string | null; - name: string; - type: string; - volumePercent: number; - }; - item: - | { - __typename: 'Episode'; - id: string; - show: { - __typename: 'Show'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } - | { - __typename: 'Track'; - id: string; - album: { - __typename: 'Album'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } - | null; - } & { - ' $fragmentRefs'?: { - PlaybackStateFragment: PlaybackStateFragment; - Playbar_playbackState: Playbar_playbackState; - PlaybackItemProgressBar_playbackState: PlaybackItemProgressBar_playbackState; - PlaybackItemDetails_playbackState: PlaybackItemDetails_playbackState; - }; + | ({ __typename: 'PlaybackState' } & { + ' $fragmentRefs'?: { PlaybackStateFragment: PlaybackStateFragment }; }) | null; }; From 78f4cd4c0738cd1e7b4b66d473df4b12bd7ed26c Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 18:38:16 -0700 Subject: [PATCH 33/64] Remove unused import --- client/src/routes/albums/album.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/client/src/routes/albums/album.tsx b/client/src/routes/albums/album.tsx index a8f07d71..340fde66 100644 --- a/client/src/routes/albums/album.tsx +++ b/client/src/routes/albums/album.tsx @@ -1,9 +1,4 @@ -import { - TypedDocumentNode, - gql, - useReadQuery, - useSuspenseQuery, -} from '@apollo/client'; +import { TypedDocumentNode, gql, useReadQuery } from '@apollo/client'; import { LoaderFunctionArgs, useLoaderData, useParams } from 'react-router-dom'; import { AlbumRouteQuery, From c2cc5f8029f13ba2d7e1d6c32bb3b7f141796d57 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 18:45:36 -0700 Subject: [PATCH 34/64] Convert AlbumTracksTable to use data masking --- client/src/components/AlbumTracksTable.tsx | 130 ++++++++++++--------- client/src/routes/albums/album.tsx | 9 +- client/src/types/api.ts | 24 +--- 3 files changed, 84 insertions(+), 79 deletions(-) diff --git a/client/src/components/AlbumTracksTable.tsx b/client/src/components/AlbumTracksTable.tsx index 60552fed..fe9b2c38 100644 --- a/client/src/components/AlbumTracksTable.tsx +++ b/client/src/components/AlbumTracksTable.tsx @@ -1,4 +1,9 @@ -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import { createColumnHelper } from '@tanstack/react-table'; import { Clock } from 'lucide-react'; import { Get } from 'type-fest'; @@ -17,7 +22,7 @@ import { fragmentRegistry } from '../apollo/fragmentRegistry'; type Track = NonNullable>; interface AlbumTracksTableProps { - album: Album; + album: FragmentType; tracksContains: Map; } @@ -25,7 +30,7 @@ interface AlbumTracksTableMeta { tracksContains: Map; } -fragmentRegistry.register(gql` +const AlbumTracksTableFragment: TypedDocumentNode = gql` fragment AlbumTracksTable_album on Album { id uri @@ -47,78 +52,91 @@ fragmentRegistry.register(gql` ...AlbumTrackTitleCell_album @unmask(mode: "migrate") } -`); +`; + +fragmentRegistry.register(AlbumTracksTableFragment); const columnHelper = createColumnHelper(); const AlbumTracksTable = ({ album, tracksContains }: AlbumTracksTableProps) => { + const { data, complete } = useFragment({ + fragment: AlbumTracksTableFragment, + from: album, + }); const [resumePlayback] = useResumePlaybackMutation(); const columns = useMemo( - () => [ - columnHelper.accessor((track) => track, { - header: '#', - meta: { shrink: true }, - cell: (info) => { - return ( - - ); - }, - }), - columnHelper.display({ - id: 'title', - header: 'Title', - cell: (info) => { - return ( - - ); - }, - }), - columnHelper.display({ - id: 'liked', - header: '', - cell: (info) => { - const { tracksContains } = info.table.options - .meta as unknown as AlbumTracksTableMeta; - - const track = info.row.original; - const liked = tracksContains.get(track.id) ?? false; - - return ; - }, - meta: { - shrink: true, - }, - }), - columnHelper.accessor('durationMs', { - header: () => , - cell: (info) => , - meta: { - headerAlign: 'right', - shrink: true, - }, - }), - ], - [album] + () => + complete + ? [ + columnHelper.accessor((track) => track, { + header: '#', + meta: { shrink: true }, + cell: (info) => { + return ( + + ); + }, + }), + columnHelper.display({ + id: 'title', + header: 'Title', + cell: (info) => { + return ( + + ); + }, + }), + columnHelper.display({ + id: 'liked', + header: '', + cell: (info) => { + const { tracksContains } = info.table.options + .meta as unknown as AlbumTracksTableMeta; + + const track = info.row.original; + const liked = tracksContains.get(track.id) ?? false; + + return ; + }, + meta: { + shrink: true, + }, + }), + columnHelper.accessor('durationMs', { + header: () => , + cell: (info) => , + meta: { + headerAlign: 'right', + shrink: true, + }, + }), + ] + : [], + [data] ); + if (!complete) { + return null; + } + return ( edge.node) ?? []} + data={data.tracks?.edges.map((edge) => edge.node) ?? []} meta={{ tracksContains }} onDoubleClickRow={(row) => { const track = row.original; resumePlayback({ - contextUri: album.uri, + contextUri: data.uri, offset: { uri: track.uri }, }); }} @@ -165,7 +183,7 @@ const AlbumTracksTable = ({ album, tracksContains }: AlbumTracksTableProps) => { Share - + ); }} diff --git a/client/src/routes/albums/album.tsx b/client/src/routes/albums/album.tsx index 340fde66..f15a7210 100644 --- a/client/src/routes/albums/album.tsx +++ b/client/src/routes/albums/album.tsx @@ -54,8 +54,15 @@ const ALBUM_ROUTE_QUERY: TypedDocumentNode< date precision } + tracks { + edges { + node { + id + } + } + } - ...AlbumTracksTable_album @unmask(mode: "migrate") + ...AlbumTracksTable_album } } `; diff --git a/client/src/types/api.ts b/client/src/types/api.ts index c1d9d514..f3002eb9 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3303,31 +3303,11 @@ export type AlbumRouteQuery = { __typename: 'AlbumTrackConnection'; edges: Array<{ __typename: 'AlbumTrackEdge'; - node: { - __typename: 'Track'; - id: string; - uri: string; - durationMs: number; - trackNumber: number | null; - name: string; - explicit: boolean; - artists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - }>; - } & { - ' $fragmentRefs'?: { - AlbumTrackTitleCell_track: AlbumTrackTitleCell_track; - }; - }; + node: { __typename: 'Track'; id: string }; }>; } | null; } & { - ' $fragmentRefs'?: { - AlbumTracksTable_album: AlbumTracksTable_album; - AlbumTrackTitleCell_album: AlbumTrackTitleCell_album; - }; + ' $fragmentRefs'?: { AlbumTracksTable_album: AlbumTracksTable_album }; }) | null; }; From cadccb6d6ebe82dfa28532127654cd4df33a684c Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 18:53:11 -0700 Subject: [PATCH 35/64] Use data masking for AlbumTracksTable and AlbumTrackTitleCell --- client/src/components/AlbumTrackTitleCell.tsx | 47 +++++++++++++++---- client/src/components/AlbumTracksTable.tsx | 7 +-- client/src/types/api.ts | 4 -- 3 files changed, 41 insertions(+), 17 deletions(-) diff --git a/client/src/components/AlbumTrackTitleCell.tsx b/client/src/components/AlbumTrackTitleCell.tsx index 315ebd54..f759798f 100644 --- a/client/src/components/AlbumTrackTitleCell.tsx +++ b/client/src/components/AlbumTrackTitleCell.tsx @@ -1,7 +1,14 @@ -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import usePlaybackState from '../hooks/usePlaybackState'; import { AlbumTrackTitleCell_album as Album, + AlbumTrackTitleCell_album, + AlbumTrackTitleCell_track, AlbumTrackTitleCell_playbackState as PlaybackState, AlbumTrackTitleCell_track as Track, } from '../types/api'; @@ -12,8 +19,8 @@ import Flex from './Flex'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface AlbumTrackTitleCellProps { - album: Album; - track: Track; + album: FragmentType; + track: FragmentType; } const PLAYBACK_STATE_FRAGMENT = gql` @@ -28,11 +35,13 @@ const PLAYBACK_STATE_FRAGMENT = gql` } `; -fragmentRegistry.register(gql` +const AlbumTrackTitleCellAlbumFragment: TypedDocumentNode = gql` fragment AlbumTrackTitleCell_album on Album { uri } +`; +const AlbumTrackTitleCellTrackFragment: TypedDocumentNode = gql` fragment AlbumTrackTitleCell_track on Track { id name @@ -43,15 +52,33 @@ fragmentRegistry.register(gql` name } } -`); +`; + +fragmentRegistry.register( + AlbumTrackTitleCellAlbumFragment, + AlbumTrackTitleCellTrackFragment +); const AlbumTrackTitleCell = ({ album, track }: AlbumTrackTitleCellProps) => { + const { data: albumData, complete: albumComplete } = useFragment({ + fragment: AlbumTrackTitleCellAlbumFragment, + from: album, + }); + const { data: trackData, complete: trackComplete } = useFragment({ + fragment: AlbumTrackTitleCellTrackFragment, + from: track, + }); + const playbackState = usePlaybackState({ fragment: PLAYBACK_STATE_FRAGMENT, }); - const isPlayingInAlbum = playbackState?.context?.uri === album.uri; - const isCurrentTrack = track.uri === playbackState?.item?.uri; + if (!trackComplete || !albumComplete) { + return null; + } + + const isPlayingInAlbum = playbackState?.context?.uri === albumData.uri; + const isCurrentTrack = trackData.uri === playbackState?.item?.uri; return ( @@ -59,12 +86,12 @@ const AlbumTrackTitleCell = ({ album, track }: AlbumTrackTitleCellProps) => { className="text-base" color={isCurrentTrack && isPlayingInAlbum ? 'themeLight' : 'primary'} > - {track.name} + {trackData.name} - {track.explicit && } + {trackData.explicit && } - {track.artists.map((artist) => ( + {trackData.artists.map((artist) => ( = gql` trackNumber artists { id + name } - ...AlbumTrackTitleCell_track @unmask(mode: "migrate") + ...AlbumTrackTitleCell_track } } } - ...AlbumTrackTitleCell_album @unmask(mode: "migrate") + ...AlbumTrackTitleCell_album } `; @@ -117,7 +118,7 @@ const AlbumTracksTable = ({ album, tracksContains }: AlbumTracksTableProps) => { }), ] : [], - [data] + [data, complete] ); if (!complete) { diff --git a/client/src/types/api.ts b/client/src/types/api.ts index f3002eb9..b4c255b7 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2407,8 +2407,6 @@ export type AlbumTracksTable_album = ({ uri: string; durationMs: number; trackNumber: number | null; - name: string; - explicit: boolean; artists: Array<{ __typename: 'Artist'; id: string; name: string }>; } & { ' $fragmentRefs'?: { @@ -4275,8 +4273,6 @@ export type TrackRouteQuery = { uri: string; durationMs: number; trackNumber: number | null; - name: string; - explicit: boolean; artists: Array<{ __typename: 'Artist'; id: string; name: string }>; } & { ' $fragmentRefs'?: { From d4909831b7581ce048fc748bf1852ab6d2797a25 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 18:58:23 -0700 Subject: [PATCH 36/64] Convert AlbumTile to data masking --- client/src/components/AlbumTile.tsx | 36 +++++++++++++++------ client/src/routes/artists/artist.tsx | 2 +- client/src/types/api.ts | 48 +++++++--------------------- 3 files changed, 39 insertions(+), 47 deletions(-) diff --git a/client/src/components/AlbumTile.tsx b/client/src/components/AlbumTile.tsx index 0c491421..891a11ff 100644 --- a/client/src/components/AlbumTile.tsx +++ b/client/src/components/AlbumTile.tsx @@ -1,15 +1,20 @@ -import { gql } from '@apollo/client'; -import { AlbumTile_album as Album } from '../types/api'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; +import { AlbumTile_album } from '../types/api'; import { capitalize } from '../utils/string'; import { yearOfRelease } from '../utils/releaseDate'; import MediaTile from './MediaTile'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface AlbumTileProps { - album: Album; + album: FragmentType; } -fragmentRegistry.register(gql` +const AlbumTileFragment: TypedDocumentNode = gql` fragment AlbumTile_album on Album { id name @@ -22,17 +27,28 @@ fragmentRegistry.register(gql` url } } -`); +`; + +fragmentRegistry.register(AlbumTileFragment); const AlbumTile = ({ album }: AlbumTileProps) => { + const { data, complete } = useFragment({ + fragment: AlbumTileFragment, + from: album, + }); + + if (!complete) { + return null; + } + return ( - - + +
- {album.name} + {data.name} - {yearOfRelease(album.releaseDate)} - {capitalize(album.albumType.toLowerCase())} + {yearOfRelease(data.releaseDate)} + {capitalize(data.albumType.toLowerCase())}
diff --git a/client/src/routes/artists/artist.tsx b/client/src/routes/artists/artist.tsx index 7be6603e..7dd03437 100644 --- a/client/src/routes/artists/artist.tsx +++ b/client/src/routes/artists/artist.tsx @@ -56,7 +56,7 @@ const ARTIST_ROUTE_QUERY: TypedDocumentNode< node { id - ...AlbumTile_album @unmask(mode: "migrate") + ...AlbumTile_album } } } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index b4c255b7..3dba2b15 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3330,15 +3330,9 @@ export type ArtistRouteQuery = { __typename: 'ArtistAlbumsConnection'; edges: Array<{ __typename: 'ArtistAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; - } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; + node: { __typename: 'Album'; id: string } & { + ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; + }; }> | null; } & { ' $fragmentRefs'?: { @@ -3351,15 +3345,9 @@ export type ArtistRouteQuery = { __typename: 'ArtistAlbumsConnection'; edges: Array<{ __typename: 'ArtistAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; - } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; + node: { __typename: 'Album'; id: string } & { + ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; + }; }> | null; } & { ' $fragmentRefs'?: { @@ -3372,15 +3360,9 @@ export type ArtistRouteQuery = { __typename: 'ArtistAlbumsConnection'; edges: Array<{ __typename: 'ArtistAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; - } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; + node: { __typename: 'Album'; id: string } & { + ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; + }; }> | null; } & { ' $fragmentRefs'?: { @@ -3421,15 +3403,9 @@ export type ArtistRouteQuery_albums = { __typename: 'ArtistAlbumsConnection'; edges: Array<{ __typename: 'ArtistAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; - } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; + node: { __typename: 'Album'; id: string } & { + ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; + }; }> | null; } & { ' $fragmentName'?: 'ArtistRouteQuery_albums' }; From 3961a7b4dc769b329cfbdc120243657983cec661 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:02:30 -0700 Subject: [PATCH 37/64] Convert ArtistTile to data masking --- client/src/components/ArtistTile.tsx | 32 +++++++++++++++++++++------- client/src/routes/artists/artist.tsx | 2 +- client/src/types/api.ts | 9 +++----- 3 files changed, 28 insertions(+), 15 deletions(-) diff --git a/client/src/components/ArtistTile.tsx b/client/src/components/ArtistTile.tsx index 174e4f85..0851dd8c 100644 --- a/client/src/components/ArtistTile.tsx +++ b/client/src/components/ArtistTile.tsx @@ -1,14 +1,19 @@ -import { gql } from '@apollo/client'; -import { ArtistTile_artist as Artist } from '../types/api'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; +import { ArtistTile_artist as Artist, ArtistTile_artist } from '../types/api'; import MediaTile from './MediaTile'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface ArtistTileProps { - artist: Artist; + artist: FragmentType; animateIn?: boolean; } -fragmentRegistry.register(gql` +const ArtistTileFragment: TypedDocumentNode = gql` fragment ArtistTile_artist on Artist { id name @@ -16,18 +21,29 @@ fragmentRegistry.register(gql` url } } -`); +`; + +fragmentRegistry.register(ArtistTileFragment); const ArtistTile = ({ artist, animateIn }: ArtistTileProps) => { + const { data, complete } = useFragment({ + fragment: ArtistTileFragment, + from: artist, + }); + + if (!complete) { + return null; + } + return ( - +
- {artist.name} + {data.name} Artist
diff --git a/client/src/routes/artists/artist.tsx b/client/src/routes/artists/artist.tsx index 7dd03437..3b94c54b 100644 --- a/client/src/routes/artists/artist.tsx +++ b/client/src/routes/artists/artist.tsx @@ -41,7 +41,7 @@ const ARTIST_ROUTE_QUERY: TypedDocumentNode< } relatedArtists { id - ...ArtistTile_artist @unmask(mode: "migrate") + ...ArtistTile_artist } topTracks { id diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 3dba2b15..c3891da8 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3373,12 +3373,9 @@ export type ArtistRouteQuery = { followers: { __typename: 'Followers'; total: number }; images: Array<{ __typename: 'Image'; url: string }>; relatedArtists: Array< - { - __typename: 'Artist'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } } + { __typename: 'Artist'; id: string } & { + ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; + } >; topTracks: Array< { From ac8709353209e2001b69b5c8897c96947e3b91ef Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:03:43 -0700 Subject: [PATCH 38/64] Keep regular unmask for fragment defined as common fragment --- client/src/routes/artists/artist.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/client/src/routes/artists/artist.tsx b/client/src/routes/artists/artist.tsx index 3b94c54b..a512be40 100644 --- a/client/src/routes/artists/artist.tsx +++ b/client/src/routes/artists/artist.tsx @@ -22,15 +22,15 @@ const ARTIST_ROUTE_QUERY: TypedDocumentNode< id name albums(includeGroups: [ALBUM]) { - ...ArtistRouteQuery_albums @unmask(mode: "migrate") + ...ArtistRouteQuery_albums @unmask } singles: albums(includeGroups: [SINGLE]) { - ...ArtistRouteQuery_albums @unmask(mode: "migrate") + ...ArtistRouteQuery_albums @unmask } appearsOn: albums(includeGroups: [APPEARS_ON]) { - ...ArtistRouteQuery_albums @unmask(mode: "migrate") + ...ArtistRouteQuery_albums @unmask } followers { @@ -55,7 +55,6 @@ const ARTIST_ROUTE_QUERY: TypedDocumentNode< edges { node { id - ...AlbumTile_album } } From 665b7fcf8cac400cc91ad8c816881594ea4f64c9 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:10:44 -0700 Subject: [PATCH 39/64] Rework artist top track and use data masking --- client/src/components/ArtistTopTrack.tsx | 68 +++++++++++++++++++++++ client/src/components/ArtistTopTracks.tsx | 61 -------------------- client/src/routes/artists/artist.tsx | 15 +++-- client/src/routes/tracks/track.tsx | 4 +- client/src/types/api.ts | 13 +---- 5 files changed, 82 insertions(+), 79 deletions(-) create mode 100644 client/src/components/ArtistTopTrack.tsx delete mode 100644 client/src/components/ArtistTopTracks.tsx diff --git a/client/src/components/ArtistTopTrack.tsx b/client/src/components/ArtistTopTrack.tsx new file mode 100644 index 00000000..ff50e223 --- /dev/null +++ b/client/src/components/ArtistTopTrack.tsx @@ -0,0 +1,68 @@ +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; +import { ArtistTopTracks_tracks as Track } from '../types/api'; +import { thumbnail } from '../utils/image'; +import CoverPhoto from './CoverPhoto'; +import ExplicitBadge from './ExplicitBadge'; +import Duration from './Duration'; +import Flex from './Flex'; +import { fragmentRegistry } from '../apollo/fragmentRegistry'; + +interface ArtistTopTrackProps { + track: FragmentType; + trackNumber: number; +} + +const ArtistTopTrackFragment: TypedDocumentNode = gql` + fragment ArtistTopTracks_tracks on Track { + id + durationMs + explicit + name + album { + id + images { + url + } + } + } +`; + +fragmentRegistry.register(ArtistTopTrackFragment); + +const ArtistTopTrack = ({ track, trackNumber }: ArtistTopTrackProps) => { + const { data, complete } = useFragment({ + fragment: ArtistTopTrackFragment, + from: track, + }); + + if (!complete) { + return null; + } + + const albumCoverPhoto = thumbnail(data.album.images); + + return ( +
+ + {trackNumber} + + + + + {data.name} + {data.explicit && } + + + + + +
+ ); +}; + +export default ArtistTopTrack; diff --git a/client/src/components/ArtistTopTracks.tsx b/client/src/components/ArtistTopTracks.tsx deleted file mode 100644 index f98388b2..00000000 --- a/client/src/components/ArtistTopTracks.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { gql } from '@apollo/client'; -import { ArtistTopTracks_tracks as Track } from '../types/api'; -import { thumbnail } from '../utils/image'; -import CoverPhoto from './CoverPhoto'; -import ExplicitBadge from './ExplicitBadge'; -import Duration from './Duration'; -import Flex from './Flex'; -import { fragmentRegistry } from '../apollo/fragmentRegistry'; - -interface ArtistTopTracksProps { - className?: string; - tracks: Track[]; -} - -fragmentRegistry.register(gql` - fragment ArtistTopTracks_tracks on Track { - id - durationMs - explicit - name - album { - id - images { - url - } - } - } -`); - -const ArtistTopTracks = ({ className, tracks }: ArtistTopTracksProps) => { - return ( -
- {tracks.slice(0, 5).map((track, index) => { - const albumCoverPhoto = thumbnail(track.album.images); - - return ( -
- - {index + 1} - - - - - {track.name} - {track.explicit && } - - - - - -
- ); - })} -
- ); -}; - -export default ArtistTopTracks; diff --git a/client/src/routes/artists/artist.tsx b/client/src/routes/artists/artist.tsx index a512be40..8097478f 100644 --- a/client/src/routes/artists/artist.tsx +++ b/client/src/routes/artists/artist.tsx @@ -5,7 +5,7 @@ import { Get } from 'type-fest'; import { ArtistRouteQuery, ArtistRouteQueryVariables } from '../../types/api'; import AlbumTile from '../../components/AlbumTile'; import ArtistTile from '../../components/ArtistTile'; -import ArtistTopTracks from '../../components/ArtistTopTracks'; +import ArtistTopTrack from '../../components/ArtistTopTrack'; import Page from '../../components/Page'; import Skeleton from '../../components/Skeleton'; import TileGrid from '../../components/TileGrid'; @@ -45,8 +45,7 @@ const ARTIST_ROUTE_QUERY: TypedDocumentNode< } topTracks { id - - ...ArtistTopTracks_tracks @unmask(mode: "migrate") + ...ArtistTopTracks_tracks } } } @@ -115,7 +114,15 @@ export const RouteComponent = () => {

Popular

- +
+ {artist.topTracks.slice(0, 5).map((track, idx) => ( + + ))} +
diff --git a/client/src/routes/tracks/track.tsx b/client/src/routes/tracks/track.tsx index 490a55e7..99a4fe67 100644 --- a/client/src/routes/tracks/track.tsx +++ b/client/src/routes/tracks/track.tsx @@ -2,7 +2,7 @@ import { gql, useSuspenseQuery } from '@apollo/client'; import { TrackRouteQuery, TrackRouteQueryVariables } from '../../types/api'; import { useParams } from 'react-router-dom'; import AlbumTracksTable from '../../components/AlbumTracksTable'; -import ArtistTopTracks from '../../components/ArtistTopTracks'; +import ArtistTopTrack from '../../components/ArtistTopTrack'; import ArtistTile from '../../components/ArtistTile'; import CoverPhoto from '../../components/CoverPhoto'; import EntityLink from '../../components/EntityLink'; @@ -85,7 +85,7 @@ export const RouteComponent = () => {

Popular Tracks by {primaryArtist.name}

- + diff --git a/client/src/types/api.ts b/client/src/types/api.ts index c3891da8..aa8d7560 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3378,18 +3378,7 @@ export type ArtistRouteQuery = { } >; topTracks: Array< - { - __typename: 'Track'; - id: string; - durationMs: number; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } & { + { __typename: 'Track'; id: string } & { ' $fragmentRefs'?: { ArtistTopTracks_tracks: ArtistTopTracks_tracks }; } >; From 340ab63fdd2f3796b444f708cfabd700259308d2 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:14:40 -0700 Subject: [PATCH 40/64] Use TypedDocumentNode for playlist route --- client/src/routes/playlists/playlist.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/client/src/routes/playlists/playlist.tsx b/client/src/routes/playlists/playlist.tsx index 6ec02168..7bafc7f2 100644 --- a/client/src/routes/playlists/playlist.tsx +++ b/client/src/routes/playlists/playlist.tsx @@ -1,5 +1,5 @@ import { useParams } from 'react-router-dom'; -import { gql, useSuspenseQuery } from '@apollo/client'; +import { TypedDocumentNode, gql, useSuspenseQuery } from '@apollo/client'; import { PlaylistQuery, PlaylistQueryVariables, @@ -29,7 +29,10 @@ import Duration from '../../components/Duration'; import ContextMenuAction from '../../components/ContextMenuAction'; import ContextMenu from '../../components/ContextMenu'; -const PLAYLIST_QUERY = gql` +const PLAYLIST_QUERY: TypedDocumentNode< + PlaylistQuery, + PlaylistQueryVariables +> = gql` query PlaylistQuery($id: ID!, $offset: Int) { me { profile { @@ -93,7 +96,7 @@ const PLAYLIST_QUERY = gql` } `; -const PLAYBACK_STATE_FRAGMENT = gql` +const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` fragment PlaylistRoutePlaybackStateFragment on PlaybackState { isPlaying context { @@ -104,10 +107,9 @@ const PLAYBACK_STATE_FRAGMENT = gql` export const RouteComponent = () => { const { playlistId } = useParams() as { playlistId: 'string' }; - const { data, fetchMore } = useSuspenseQuery< - PlaylistQuery, - PlaylistQueryVariables - >(PLAYLIST_QUERY, { variables: { id: playlistId } }); + const { data, fetchMore } = useSuspenseQuery(PLAYLIST_QUERY, { + variables: { id: playlistId }, + }); const playlist = data.playlist; if (!playlist) { @@ -128,9 +130,7 @@ export const RouteComponent = () => { const [resumePlayback] = useResumePlaybackMutation(); - const playbackState = usePlaybackState({ - fragment: PLAYBACK_STATE_FRAGMENT, - }); + const playbackState = usePlaybackState({ fragment: PLAYBACK_STATE_FRAGMENT }); const { tracks } = playlist; const images = playlist.images ?? []; From 1bdc66969bc17c48a963fd2c22fb4ee8214e8aab Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:19:44 -0700 Subject: [PATCH 41/64] Convert TrackNumberCell to use data masking --- client/src/components/TrackNumberCell.tsx | 28 ++++++++++++++++++----- client/src/routes/playlists/playlist.tsx | 2 +- client/src/types/api.ts | 1 - 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/client/src/components/TrackNumberCell.tsx b/client/src/components/TrackNumberCell.tsx index 0b77468c..2d5ce77c 100644 --- a/client/src/components/TrackNumberCell.tsx +++ b/client/src/components/TrackNumberCell.tsx @@ -1,4 +1,9 @@ -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import { TrackNumberCell_track as Track, TrackNumberCell_playbackState as PlaybackState, @@ -17,7 +22,7 @@ interface Context { interface TrackNumberCellProps { context: Context; position: number; - track: Track; + track: FragmentType; preferIcon?: boolean; } @@ -34,13 +39,15 @@ const PLAYBACK_STATE_FRAGMENT = gql` } `; -fragmentRegistry.register(gql` +const TrackNumberCellFragment: TypedDocumentNode = gql` fragment TrackNumberCell_track on Track { id uri trackNumber } -`); +`; + +fragmentRegistry.register(TrackNumberCellFragment); const TrackNumberCell = ({ context, @@ -52,12 +59,21 @@ const TrackNumberCell = ({ fragment: PLAYBACK_STATE_FRAGMENT, }); + const { data, complete } = useFragment({ + fragment: TrackNumberCellFragment, + from: track, + }); + + if (!complete) { + return null; + } + const trackNumber = - context.__typename === 'Playlist' ? position + 1 : track.trackNumber; + context.__typename === 'Playlist' ? position + 1 : data.trackNumber; const isPlaying = playbackState?.isPlaying ?? false; const isPlayingInContext = playbackState?.context?.uri === context.uri; - const isCurrentTrack = playbackState?.item?.uri === track.uri; + const isCurrentTrack = playbackState?.item?.uri === data.uri; return (
diff --git a/client/src/routes/playlists/playlist.tsx b/client/src/routes/playlists/playlist.tsx index 7bafc7f2..0fbdac04 100644 --- a/client/src/routes/playlists/playlist.tsx +++ b/client/src/routes/playlists/playlist.tsx @@ -66,7 +66,7 @@ const PLAYLIST_QUERY: TypedDocumentNode< name } - ...TrackNumberCell_track @unmask(mode: "migrate") + ...TrackNumberCell_track } ... on Episode { diff --git a/client/src/types/api.ts b/client/src/types/api.ts index aa8d7560..3e85dc37 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3801,7 +3801,6 @@ export type PlaylistQuery = { name: string; durationMs: number; uri: string; - trackNumber: number | null; explicit: boolean; album: { __typename: 'Album'; From aad8746d7ee1e5bb93f865434bfcb1bb5c73ead7 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:30:36 -0700 Subject: [PATCH 42/64] Update PlaylistTitleCell to use data masking and simplify props --- client/src/components/PlaylistTitleCell.tsx | 56 ++++---- client/src/routes/playlists/playlist.tsx | 6 +- client/src/types/api.ts | 144 ++++++++------------ 3 files changed, 91 insertions(+), 115 deletions(-) diff --git a/client/src/components/PlaylistTitleCell.tsx b/client/src/components/PlaylistTitleCell.tsx index 0a7a1b10..6ca523da 100644 --- a/client/src/components/PlaylistTitleCell.tsx +++ b/client/src/components/PlaylistTitleCell.tsx @@ -1,4 +1,9 @@ -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import cx from 'classnames'; import CommaSeparatedList from './CommaSeparatedList'; import CoverPhoto from './CoverPhoto'; @@ -6,17 +11,16 @@ import EntityLink from './EntityLink'; import Flex from './Flex'; import { thumbnail } from '../utils/image'; import { - PlaylistTitleCell_playlist as Playlist, - PlaylistTitleCell_playlistTrack as PlaylistTrack, PlaylistTitleCell_playbackState as PlaybackState, + PlaylistTitleCell_playlistTrack, } from '../types/api'; import usePlaybackState from '../hooks/usePlaybackState'; import ExplicitBadge from './ExplicitBadge'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface PlaylistTitleCellProps { - playlist: Playlist; - playlistTrack: PlaylistTrack; + playlistTrack: FragmentType; + playlistUri: string; } const PLAYBACK_STATE_FRAGMENT = gql` @@ -31,12 +35,7 @@ const PLAYBACK_STATE_FRAGMENT = gql` } `; -fragmentRegistry.register(gql` - fragment PlaylistTitleCell_playlist on Playlist { - id - uri - } - +const PlaylistTitleCellFragment: TypedDocumentNode = gql` fragment PlaylistTitleCell_playlistTrack on PlaylistTrack { id name @@ -68,23 +67,32 @@ fragmentRegistry.register(gql` } } } -`); +`; + +fragmentRegistry.register(PlaylistTitleCellFragment); const PlaylistTitleCell = ({ - playlist, playlistTrack, + playlistUri, }: PlaylistTitleCellProps) => { + const { data, complete } = useFragment({ + fragment: PlaylistTitleCellFragment, + from: playlistTrack, + }); + const playbackState = usePlaybackState({ fragment: PLAYBACK_STATE_FRAGMENT, }); - const isPlayingInPlaylist = playbackState?.context?.uri === playlist.uri; - const isCurrentTrack = playlistTrack.uri === playbackState?.item?.uri; + if (!complete) { + return null; + } + + const isPlayingInPlaylist = playbackState?.context?.uri === playlistUri; + const isCurrentTrack = data.uri === playbackState?.item?.uri; const images = - playlistTrack.__typename === 'Episode' - ? playlistTrack.show.images - : playlistTrack.album.images; + data.__typename === 'Episode' ? data.show.images : data.album.images; const image = thumbnail(images); @@ -99,15 +107,15 @@ const PlaylistTitleCell = ({ ? 'text-theme-light' : 'text-primary' )} - entity={playlistTrack} + entity={data} > - {playlistTrack.name} + {data.name} - {playlistTrack.explicit && } - {playlistTrack.__typename === 'Track' ? ( + {data.explicit && } + {data.__typename === 'Track' ? ( - {playlistTrack.artists.map((artist) => ( + {data.artists.map((artist) => ( ) : ( - {playlistTrack.show.publisher} + {data.show.publisher} )} diff --git a/client/src/routes/playlists/playlist.tsx b/client/src/routes/playlists/playlist.tsx index 0fbdac04..885e22cb 100644 --- a/client/src/routes/playlists/playlist.tsx +++ b/client/src/routes/playlists/playlist.tsx @@ -80,7 +80,7 @@ const PLAYLIST_QUERY: TypedDocumentNode< } } - ...PlaylistTitleCell_playlistTrack @unmask(mode: "migrate") + ...PlaylistTitleCell_playlistTrack } } pageInfo { @@ -90,8 +90,6 @@ const PLAYLIST_QUERY: TypedDocumentNode< total } } - - ...PlaylistTitleCell_playlist @unmask(mode: "migrate") } } `; @@ -400,8 +398,8 @@ const columns = [ return ( ); }, diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 3e85dc37..f969d965 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2824,12 +2824,6 @@ export type PlaylistTitleCell_playbackState = { | null; } & { ' $fragmentName'?: 'PlaylistTitleCell_playbackState' }; -export type PlaylistTitleCell_playlist = { - __typename: 'Playlist'; - id: string; - uri: string; -} & { ' $fragmentName'?: 'PlaylistTitleCell_playlist' }; - type PlaylistTitleCell_playlistTrack_Episode = { __typename: 'Episode'; explicit: boolean; @@ -3753,87 +3747,63 @@ export type PlaylistQuery = { __typename: 'CurrentUser'; profile: { __typename: 'CurrentUserProfile'; id: string }; } | null; - playlist: - | ({ - __typename: 'Playlist'; - id: string; - name: string; - uri: string; - images: Array<{ - __typename: 'Image'; - url: string; - vibrantColor: string | null; - }> | null; - owner: { __typename: 'User'; id: string; displayName: string | null }; - tracks: { - __typename: 'PlaylistTrackConnection'; - edges: Array<{ - __typename: 'PlaylistTrackEdge'; - addedAt: string | null; - node: - | ({ - __typename: 'Episode'; - id: string; - name: string; - durationMs: number; - uri: string; - explicit: boolean; - releaseDate: { - __typename: 'ReleaseDate'; - date: string; - precision: ReleaseDatePrecision; - }; - show: { - __typename: 'Show'; - id: string; - name: string; - publisher: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } & { - ' $fragmentRefs'?: { - PlaylistTitleCell_playlistTrack_Episode: PlaylistTitleCell_playlistTrack_Episode; - }; - }) - | ({ - __typename: 'Track'; - id: string; - name: string; - durationMs: number; - uri: string; - explicit: boolean; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - artists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - }>; - } & { - ' $fragmentRefs'?: { - TrackNumberCell_track: TrackNumberCell_track; - PlaylistTitleCell_playlistTrack_Track: PlaylistTitleCell_playlistTrack_Track; - }; - }); - }>; - pageInfo: { - __typename: 'PageInfo'; - hasNextPage: boolean; - offset: number; - limit: number; - total: number; - }; - }; - } & { - ' $fragmentRefs'?: { - PlaylistTitleCell_playlist: PlaylistTitleCell_playlist; - }; - }) - | null; + playlist: { + __typename: 'Playlist'; + id: string; + name: string; + uri: string; + images: Array<{ + __typename: 'Image'; + url: string; + vibrantColor: string | null; + }> | null; + owner: { __typename: 'User'; id: string; displayName: string | null }; + tracks: { + __typename: 'PlaylistTrackConnection'; + edges: Array<{ + __typename: 'PlaylistTrackEdge'; + addedAt: string | null; + node: + | ({ + __typename: 'Episode'; + id: string; + name: string; + durationMs: number; + uri: string; + releaseDate: { + __typename: 'ReleaseDate'; + date: string; + precision: ReleaseDatePrecision; + }; + show: { __typename: 'Show'; id: string; name: string }; + } & { + ' $fragmentRefs'?: { + PlaylistTitleCell_playlistTrack_Episode: PlaylistTitleCell_playlistTrack_Episode; + }; + }) + | ({ + __typename: 'Track'; + id: string; + name: string; + durationMs: number; + uri: string; + album: { __typename: 'Album'; id: string; name: string }; + } & { + ' $fragmentRefs'?: { + TrackNumberCell_track: TrackNumberCell_track; + PlaylistTitleCell_playlistTrack_Track: PlaylistTitleCell_playlistTrack_Track; + }; + }); + }>; + pageInfo: { + __typename: 'PageInfo'; + hasNextPage: boolean; + offset: number; + limit: number; + total: number; + }; + }; + } | null; }; export type PlaylistRoutePlaybackStateFragment = { From 630b4cdfa0b772c35717fa586b07744222d0f016 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:32:36 -0700 Subject: [PATCH 43/64] Fix bug with playlist route --- client/src/routes/playlists/playlist.tsx | 3 +++ client/src/types/api.ts | 1 + 2 files changed, 4 insertions(+) diff --git a/client/src/routes/playlists/playlist.tsx b/client/src/routes/playlists/playlist.tsx index 885e22cb..8a72c633 100644 --- a/client/src/routes/playlists/playlist.tsx +++ b/client/src/routes/playlists/playlist.tsx @@ -65,6 +65,9 @@ const PLAYLIST_QUERY: TypedDocumentNode< id name } + artists { + id + } ...TrackNumberCell_track } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index f969d965..54e242b2 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3788,6 +3788,7 @@ export type PlaylistQuery = { durationMs: number; uri: string; album: { __typename: 'Album'; id: string; name: string }; + artists: Array<{ __typename: 'Artist'; id: string }>; } & { ' $fragmentRefs'?: { TrackNumberCell_track: TrackNumberCell_track; From 0e5dfa609df33dfc18397192380887d3d24d64bf Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:35:43 -0700 Subject: [PATCH 44/64] Fix bug on track route due to refactor of AlbumTopTrack --- client/src/routes/tracks/track.tsx | 12 ++++++++++-- client/src/types/api.ts | 13 +------------ 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/client/src/routes/tracks/track.tsx b/client/src/routes/tracks/track.tsx index 99a4fe67..fbd304e1 100644 --- a/client/src/routes/tracks/track.tsx +++ b/client/src/routes/tracks/track.tsx @@ -34,7 +34,7 @@ const TRACK_ROUTE_QUERY = gql` name topTracks { id - ...ArtistTopTracks_tracks @unmask(mode: "migrate") + ...ArtistTopTracks_tracks } ...ArtistTile_artist @unmask(mode: "migrate") @@ -85,7 +85,15 @@ export const RouteComponent = () => {

Popular Tracks by {primaryArtist.name}

- +
+ {primaryArtist.topTracks.slice(0, 5).map((track, idx) => ( + + ))} +
diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 54e242b2..d6a1f8f8 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -4225,18 +4225,7 @@ export type TrackRouteQuery = { id: string; name: string; topTracks: Array< - { - __typename: 'Track'; - id: string; - durationMs: number; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - } & { + { __typename: 'Track'; id: string } & { ' $fragmentRefs'?: { ArtistTopTracks_tracks: ArtistTopTracks_tracks; }; From edb277b3e906d3b6765cab4d8426ceff8b9fa8d4 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:37:41 -0700 Subject: [PATCH 45/64] Fix masked data dependency in track route --- client/src/routes/tracks/track.tsx | 11 +++++++++-- client/src/types/api.ts | 20 ++------------------ 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/client/src/routes/tracks/track.tsx b/client/src/routes/tracks/track.tsx index fbd304e1..650b06ec 100644 --- a/client/src/routes/tracks/track.tsx +++ b/client/src/routes/tracks/track.tsx @@ -26,8 +26,15 @@ const TRACK_ROUTE_QUERY = gql` url vibrantColor(format: RGB, alpha: 0.9) @client } + tracks { + edges { + node { + id + } + } + } - ...AlbumTracksTable_album @unmask(mode: "migrate") + ...AlbumTracksTable_album } artists { id @@ -37,7 +44,7 @@ const TRACK_ROUTE_QUERY = gql` ...ArtistTopTracks_tracks } - ...ArtistTile_artist @unmask(mode: "migrate") + ...ArtistTile_artist } } } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index d6a1f8f8..7734805c 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -4189,7 +4189,6 @@ export type TrackRouteQuery = { id: string; albumType: AlbumType; name: string; - uri: string; images: Array<{ __typename: 'Image'; url: string; @@ -4199,25 +4198,11 @@ export type TrackRouteQuery = { __typename: 'AlbumTrackConnection'; edges: Array<{ __typename: 'AlbumTrackEdge'; - node: { - __typename: 'Track'; - id: string; - uri: string; - durationMs: number; - trackNumber: number | null; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; - } & { - ' $fragmentRefs'?: { - AlbumTrackTitleCell_track: AlbumTrackTitleCell_track; - }; - }; + node: { __typename: 'Track'; id: string }; }>; } | null; } & { - ' $fragmentRefs'?: { - AlbumTracksTable_album: AlbumTracksTable_album; - AlbumTrackTitleCell_album: AlbumTrackTitleCell_album; - }; + ' $fragmentRefs'?: { AlbumTracksTable_album: AlbumTracksTable_album }; }; artists: Array< { @@ -4231,7 +4216,6 @@ export type TrackRouteQuery = { }; } >; - images: Array<{ __typename: 'Image'; url: string }>; } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } } >; } | null; From a4a557329588e082a06fca56d37fd2a8edd209cd Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:38:48 -0700 Subject: [PATCH 46/64] Fix issue with fragment not added properly in AlbumTracksTable --- client/src/components/AlbumTracksTable.tsx | 1 + client/src/types/api.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/client/src/components/AlbumTracksTable.tsx b/client/src/components/AlbumTracksTable.tsx index b6668adc..97400acc 100644 --- a/client/src/components/AlbumTracksTable.tsx +++ b/client/src/components/AlbumTracksTable.tsx @@ -47,6 +47,7 @@ const AlbumTracksTableFragment: TypedDocumentNode = gql` } ...AlbumTrackTitleCell_track + ...TrackNumberCell_track } } } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 7734805c..697057c8 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2411,6 +2411,7 @@ export type AlbumTracksTable_album = ({ } & { ' $fragmentRefs'?: { AlbumTrackTitleCell_track: AlbumTrackTitleCell_track; + TrackNumberCell_track: TrackNumberCell_track; }; }; }>; From aa944e2207c4fec3cfa8623060fa9c355df3c43e Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 19:40:13 -0700 Subject: [PATCH 47/64] Remove unneeded field from query --- client/src/components/AlbumTracksTable.tsx | 1 - client/src/types/api.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/client/src/components/AlbumTracksTable.tsx b/client/src/components/AlbumTracksTable.tsx index 97400acc..fb77aae1 100644 --- a/client/src/components/AlbumTracksTable.tsx +++ b/client/src/components/AlbumTracksTable.tsx @@ -40,7 +40,6 @@ const AlbumTracksTableFragment: TypedDocumentNode = gql` id uri durationMs - trackNumber artists { id name diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 697057c8..c857fcd7 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2406,7 +2406,6 @@ export type AlbumTracksTable_album = ({ id: string; uri: string; durationMs: number; - trackNumber: number | null; artists: Array<{ __typename: 'Artist'; id: string; name: string }>; } & { ' $fragmentRefs'?: { From 10979273ca0e95ec6c222958f529c0b5bf6b0df3 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 22:00:56 -0700 Subject: [PATCH 48/64] Create a useCurrentUserId fragment --- client/src/hooks/useCurrentUserId.ts | 21 +++++++++++++++++++++ client/src/types/api.ts | 5 +++++ 2 files changed, 26 insertions(+) create mode 100644 client/src/hooks/useCurrentUserId.ts diff --git a/client/src/hooks/useCurrentUserId.ts b/client/src/hooks/useCurrentUserId.ts new file mode 100644 index 00000000..cc3e7763 --- /dev/null +++ b/client/src/hooks/useCurrentUserId.ts @@ -0,0 +1,21 @@ +import { TypedDocumentNode, gql, useFragment } from '@apollo/client'; +import { useCurrentUserIdFragment } from '../types/api'; + +const CURRENT_USER_FRAGMENT: TypedDocumentNode = gql` + fragment useCurrentUserIdFragment on CurrentUser { + profile { + id + } + } +`; + +const useCurrentUserId = () => { + const { data } = useFragment({ + fragment: CURRENT_USER_FRAGMENT, + from: { __typename: 'CurrentUser' }, + }); + + return data.profile?.id; +}; + +export default useCurrentUserId; diff --git a/client/src/types/api.ts b/client/src/types/api.ts index c857fcd7..2d357b18 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2911,6 +2911,11 @@ export type YourEpisodesTile_connection = { }>; } & { ' $fragmentName'?: 'YourEpisodesTile_connection' }; +export type useCurrentUserIdFragment = { + __typename: 'CurrentUser'; + profile: { __typename: 'CurrentUserProfile'; id: string }; +} & { ' $fragmentName'?: 'useCurrentUserIdFragment' }; + export type SavedTracksContainsQueryVariables = Exact<{ ids: Array | Scalars['ID']['input']; }>; From b400903a64937fc7ee302333e4e77043f9bec9ba Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 22:09:22 -0700 Subject: [PATCH 49/64] Create a LikedTracksSidebarLink component --- .../src/components/LikedTracksSidebarLink.tsx | 100 ++++++++++++++++++ client/src/components/LoggedInLayout.tsx | 18 +--- client/src/types/api.ts | 6 ++ 3 files changed, 108 insertions(+), 16 deletions(-) create mode 100644 client/src/components/LikedTracksSidebarLink.tsx diff --git a/client/src/components/LikedTracksSidebarLink.tsx b/client/src/components/LikedTracksSidebarLink.tsx new file mode 100644 index 00000000..5781a8aa --- /dev/null +++ b/client/src/components/LikedTracksSidebarLink.tsx @@ -0,0 +1,100 @@ +import { NavLink } from 'react-router-dom'; +import useCurrentUserId from '../hooks/useCurrentUserId'; +import ContextMenu from './ContextMenu'; +import ContextMenuAction from './ContextMenuAction'; +import cx from 'classnames'; +import LikedSongsPlaylistCoverPhoto from './LikedSongsPlaylistCoverPhoto'; +import { TypedDocumentNode, gql } from '@apollo/client'; +import { LikedTracksSidebarLink_playbackState } from '../types/api'; +import usePlaybackState from '../hooks/usePlaybackState'; +import { Pin, Volume2 } from 'lucide-react'; +import DelimitedList from './DelimitedList'; + +const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` + fragment LikedTracksSidebarLink_playbackState on PlaybackState { + isPlaying + context { + uri + } + } +`; + +const LikedTracksSidebarLink = () => { + const currentUserId = useCurrentUserId(); + const playbackState = usePlaybackState({ + fragment: PLAYBACK_STATE_FRAGMENT, + }); + + if (!currentUserId) { + return null; + } + + const id = 'collection:tracks'; + const uri = `spotify:user:${currentUserId}:collection`; + const isCurrentContext = uri === playbackState?.context?.uri; + + return ( + + + } + > + Share + + + + + } + > +
  • + + cx( + 'leading-none transition-colors block py-2 pl-2 pr-4 transition-color duration-200 ease-out hover:no-underline justify-between rounded-md', + isActive + ? 'text-primary bg-surface hover:bg-[#393939]' + : 'hover:bg-[#1A1A1A]' + ) + } + > +
    + +
    +
    + Liked songs +
    +
    + + + Playlist + Spotify + +
    +
    + {isCurrentContext && playbackState?.isPlaying && ( + + )} +
    +     +
    • +     + ); +}; + +export default LikedTracksSidebarLink; diff --git a/client/src/components/LoggedInLayout.tsx b/client/src/components/LoggedInLayout.tsx index 9852ff36..dad19478 100644 --- a/client/src/components/LoggedInLayout.tsx +++ b/client/src/components/LoggedInLayout.tsx @@ -30,6 +30,7 @@ import Suspense from './Suspense'; import StandardLoadingState from './StandardLoadingState'; import { withHighlight } from './LoadingStateHighlighter'; import cx from 'classnames'; +import LikedTracksSidebarLink from './LikedTracksSidebarLink'; const LoggedInLayout = () => { const navigation = useNavigation(); @@ -139,22 +140,7 @@ const Sidebar = () => {
    - } - to="/collection/tracks" - /> + ; } & { ' $fragmentName'?: 'LikedSongsTile_connection' }; +export type LikedTracksSidebarLink_playbackState = { + __typename: 'PlaybackState'; + isPlaying: boolean; + context: { __typename: 'PlaybackContext'; uri: string } | null; +} & { ' $fragmentName'?: 'LikedTracksSidebarLink_playbackState' }; + export type SidebarQueryVariables = Exact<{ offset?: InputMaybe; limit?: InputMaybe; From a61611181b22c96d2d559f05b1b9dc00280503fb Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 22:12:15 -0700 Subject: [PATCH 50/64] Create a SavedEpisodesSidebarLink --- client/src/components/LoggedInLayout.tsx | 18 +--- .../components/SavedEpisodesSidebarLink.tsx | 100 ++++++++++++++++++ client/src/types/api.ts | 6 ++ 3 files changed, 108 insertions(+), 16 deletions(-) create mode 100644 client/src/components/SavedEpisodesSidebarLink.tsx diff --git a/client/src/components/LoggedInLayout.tsx b/client/src/components/LoggedInLayout.tsx index dad19478..208b15a6 100644 --- a/client/src/components/LoggedInLayout.tsx +++ b/client/src/components/LoggedInLayout.tsx @@ -31,6 +31,7 @@ import StandardLoadingState from './StandardLoadingState'; import { withHighlight } from './LoadingStateHighlighter'; import cx from 'classnames'; import LikedTracksSidebarLink from './LikedTracksSidebarLink'; +import SavedEpisodesSidebarLink from './SavedEpisodesSidebarLink'; const LoggedInLayout = () => { const navigation = useNavigation(); @@ -141,22 +142,7 @@ const Sidebar = () => {
    - } - to="/collection/episodes" - /> + {me.playlists?.edges.map(({ node: playlist }) => ( = gql` + fragment SavedEpisodesSidebarLink_playbackState on PlaybackState { + isPlaying + context { + uri + } + } +`; + +const SavedEpisodesSidebarLink = () => { + const currentUserId = useCurrentUserId(); + const playbackState = usePlaybackState({ + fragment: PLAYBACK_STATE_FRAGMENT, + }); + + if (!currentUserId) { + return null; + } + + const id = 'collection:episodes'; + const uri = `spotify:user:${currentUserId}:collection:your-episodes`; + const isCurrentContext = uri === playbackState?.context?.uri; + + return ( + + + } + > + Share + + + + + } + > +
  • + + cx( + 'leading-none transition-colors block py-2 pl-2 pr-4 transition-color duration-200 ease-out hover:no-underline justify-between rounded-md', + isActive + ? 'text-primary bg-surface hover:bg-[#393939]' + : 'hover:bg-[#1A1A1A]' + ) + } + > +
    + +
    +
    + Your Episodes +
    +
    + + + Playlist + Spotify + +
    +
    + {isCurrentContext && playbackState?.isPlaying && ( + + )} +
    +     +
    • +     + ); +}; + +export default SavedEpisodesSidebarLink; diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 9240eabe..06616d14 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2863,6 +2863,12 @@ export type PlaylistTitleCell_playlistTrack = | PlaylistTitleCell_playlistTrack_Episode | PlaylistTitleCell_playlistTrack_Track; +export type SavedEpisodesSidebarLink_playbackState = { + __typename: 'PlaybackState'; + isPlaying: boolean; + context: { __typename: 'PlaybackContext'; uri: string } | null; +} & { ' $fragmentName'?: 'SavedEpisodesSidebarLink_playbackState' }; + export type TrackNumberCell_playbackState = { __typename: 'PlaybackState'; isPlaying: boolean; From 0e1c0de6f13a4f17ac2e1761a24d0c9d2246068c Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Thu, 14 Nov 2024 22:18:44 -0700 Subject: [PATCH 51/64] Simplify API of PlaylistSidebarLink --- client/src/components/LoggedInLayout.tsx | 14 +------- client/src/components/PlaylistSidebarLink.tsx | 34 +++++++------------ client/src/types/api.ts | 7 ++-- 3 files changed, 15 insertions(+), 40 deletions(-) diff --git a/client/src/components/LoggedInLayout.tsx b/client/src/components/LoggedInLayout.tsx index 208b15a6..fe243884 100644 --- a/client/src/components/LoggedInLayout.tsx +++ b/client/src/components/LoggedInLayout.tsx @@ -13,11 +13,7 @@ import { import { SidebarQuery, SidebarQueryVariables } from '../types/api'; import PlaylistSidebarLink from './PlaylistSidebarLink'; import { Library } from 'lucide-react'; -import CoverPhoto from './CoverPhoto'; -import { thumbnail } from '../utils/image'; import OffsetBasedPaginationObserver from './OffsetBasedPaginationObserver'; -import LikedSongsPlaylistCoverPhoto from './LikedSongsPlaylistCoverPhoto'; -import YourEpisodesPlaylistCoverPhoto from './YourEpisodesPlaylistCoverPhoto'; import PlaylistDetailsModal, { PLAYLIST_DETAILS_MODAL_QUERY, } from './PlaylistDetailsModal'; @@ -101,9 +97,6 @@ const SIDEBAR_QUERY: TypedDocumentNode< edges { node { id - images { - url - } ...PlaylistSidebarLink_playlist } } @@ -145,14 +138,9 @@ const Sidebar = () => { {me.playlists?.edges.map(({ node: playlist }) => ( - } - to={`/playlists/${playlist.id}`} - onMouseOverEdit={(playlist) => + onMouseOverEdit={() => preloadPlaylistDetails({ id: playlist.id }) } onClickEdit={() => setIsPlaylistDetailsModalOpen(true)} diff --git a/client/src/components/PlaylistSidebarLink.tsx b/client/src/components/PlaylistSidebarLink.tsx index c2cfb428..b1f62dfc 100644 --- a/client/src/components/PlaylistSidebarLink.tsx +++ b/client/src/components/PlaylistSidebarLink.tsx @@ -1,11 +1,10 @@ -import { ReactElement, cloneElement } from 'react'; import { FragmentType, gql, TypedDocumentNode, useFragment, } from '@apollo/client'; -import { Volume2, Pin } from 'lucide-react'; +import { Volume2 } from 'lucide-react'; import { NavLink } from 'react-router-dom'; import ContextMenu from './ContextMenu'; import { @@ -18,14 +17,13 @@ import ContextMenuAction from './ContextMenuAction'; import DelimitedList from './DelimitedList'; import usePlaybackState from '../hooks/usePlaybackState'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; +import CoverPhoto from './CoverPhoto'; +import { thumbnail } from '../utils/image'; interface PlaylistSidebarLinkProps { playlist: FragmentType; - coverPhoto: ReactElement<{ size: string }>; - to: string; - pinned: boolean; - onClickEdit?: (playlist: PlaylistSidebarLink_playlist) => void; - onMouseOverEdit?: (playlist: PlaylistSidebarLink_playlist) => void; + onClickEdit?: () => void; + onMouseOverEdit?: () => void; } const PLAYBACK_STATE_FRAGMENT: TypedDocumentNode = gql` @@ -50,6 +48,9 @@ const PlaylistSidebarLinkFragment: TypedDocumentNode { @@ -100,8 +98,8 @@ const PlaylistSidebarLink = ({ {isOwner && ( onMouseOverEdit?.(data)} - onSelect={() => onClickEdit?.(data)} + onMouseOver={() => onMouseOverEdit?.()} + onSelect={() => onClickEdit?.()} > Edit details @@ -112,7 +110,7 @@ const PlaylistSidebarLink = ({ >
  • cx( 'leading-none transition-colors block py-2 pl-2 pr-4 transition-color duration-200 ease-out hover:no-underline justify-between rounded-md', @@ -123,7 +121,7 @@ const PlaylistSidebarLink = ({ } >
    - {cloneElement(coverPhoto, { size: '3rem' })} +
    - {pinned && ( - - )} Playlist {data.owner.displayName} diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 06616d14..7121bd00 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -2593,11 +2593,7 @@ export type SidebarQuery = { }; edges: Array<{ __typename: 'PlaylistEdge'; - node: { - __typename: 'Playlist'; - id: string; - images: Array<{ __typename: 'Image'; url: string }> | null; - } & { + node: { __typename: 'Playlist'; id: string } & { ' $fragmentRefs'?: { PlaylistSidebarLink_playlist: PlaylistSidebarLink_playlist; }; @@ -2809,6 +2805,7 @@ export type PlaylistSidebarLink_playlist = { id: string; uri: string; name: string; + images: Array<{ __typename: 'Image'; url: string }> | null; owner: { __typename: 'User'; id: string; displayName: string | null }; } & { ' $fragmentName'?: 'PlaylistSidebarLink_playlist' }; From 65e0dcbac26b0570ac26e5dc0bd32b7e5772ce9c Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:09:04 -0700 Subject: [PATCH 52/64] Update to next rc release --- client/package.json | 2 +- package-lock.json | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/client/package.json b/client/package.json index c29a8df4..26a981f3 100644 --- a/client/package.json +++ b/client/package.json @@ -6,7 +6,7 @@ "node": ">=18" }, "dependencies": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12133", + "@apollo/client": "^3.12.0-rc.1", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", diff --git a/package-lock.json b/package-lock.json index 61405797..521e2b0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "client": { "version": "0.1.0", "dependencies": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12133", + "@apollo/client": "^3.12.0-rc.1", "@apollo/persisted-query-lists": "^1.0.0", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", @@ -109,10 +109,9 @@ } }, "client/node_modules/@apollo/client": { - "version": "3.12.0-rc.0", - "resolved": "https://pkg.pr.new/@apollo/client@12133", - "integrity": "sha512-1U0asbS8mPttODnScnAZtc8OmOMPwXDMSbL+WOzR4Rf8sAYb6ONx/2kxe0vpk7FJ7u+fkULzCMYiiSa1VAQuHQ==", - "license": "MIT", + "version": "3.12.0-rc.1", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-rc.1.tgz", + "integrity": "sha512-eYgwM6jYP1ydkkULccJR6a+MrYmbkVo87OPg9bdqX1okUJfYewDc9310YsPnvL9gDVx+cBrigVRavFVecdk/RQ==", "dependencies": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", @@ -24868,7 +24867,7 @@ "client": { "version": "file:client", "requires": { - "@apollo/client": "https://pkg.pr.new/@apollo/client@12133", + "@apollo/client": "^3.12.0-rc.1", "@apollo/persisted-query-lists": "^1.0.0", "@apollo/rover": "^0.16.2", "@mdx-js/rollup": "^2.3.0", @@ -24925,8 +24924,9 @@ }, "dependencies": { "@apollo/client": { - "version": "https://pkg.pr.new/@apollo/client@12133", - "integrity": "sha512-1U0asbS8mPttODnScnAZtc8OmOMPwXDMSbL+WOzR4Rf8sAYb6ONx/2kxe0vpk7FJ7u+fkULzCMYiiSa1VAQuHQ==", + "version": "3.12.0-rc.1", + "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.12.0-rc.1.tgz", + "integrity": "sha512-eYgwM6jYP1ydkkULccJR6a+MrYmbkVo87OPg9bdqX1okUJfYewDc9310YsPnvL9gDVx+cBrigVRavFVecdk/RQ==", "requires": { "@graphql-typed-document-node/core": "^3.1.1", "@wry/caches": "^1.0.0", From fe90940e31e50f470ec36f29db622027467cadc2 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:19:23 -0700 Subject: [PATCH 53/64] Update TrackTitleCell to use data masking --- client/src/components/TrackTitleCell.tsx | 36 +++++++++++++++++------- client/src/routes/collection/tracks.tsx | 4 +-- client/src/types/api.ts | 10 +------ 3 files changed, 29 insertions(+), 21 deletions(-) diff --git a/client/src/components/TrackTitleCell.tsx b/client/src/components/TrackTitleCell.tsx index ae46954d..8a0eef00 100644 --- a/client/src/components/TrackTitleCell.tsx +++ b/client/src/components/TrackTitleCell.tsx @@ -1,7 +1,12 @@ -import { gql } from '@apollo/client'; import { - TrackTitleCell_track as Track, + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; +import { TrackTitleCell_playbackState as PlaybackState, + TrackTitleCell_track, } from '../types/api'; import cx from 'classnames'; import CoverPhoto from './CoverPhoto'; @@ -19,7 +24,7 @@ interface Context { interface TrackTitleCellProps { context: Context | null; - track: Track; + track: FragmentType; } const PLAYBACK_STATE_FRAGMENT = gql` @@ -34,7 +39,7 @@ const PLAYBACK_STATE_FRAGMENT = gql` } `; -fragmentRegistry.register(gql` +const TrackTitleCellFragment: TypedDocumentNode = gql` fragment TrackTitleCell_track on Track { id explicit @@ -51,20 +56,31 @@ fragmentRegistry.register(gql` name } } -`); +`; + +fragmentRegistry.register(TrackTitleCellFragment); const TrackTitleCell = ({ context, track }: TrackTitleCellProps) => { const playbackState = usePlaybackState({ fragment: PLAYBACK_STATE_FRAGMENT, }); + const { data, complete } = useFragment({ + fragment: TrackTitleCellFragment, + from: track, + }); + + if (!complete) { + return null; + } + const isPlayingInContext = context != null && playbackState?.context?.uri === context.uri; - const isCurrentTrack = track.uri === playbackState?.item?.uri; + const isCurrentTrack = data.uri === playbackState?.item?.uri; return ( - + { : 'text-primary' )} > - {track.name} + {data.name} - {track.explicit && } + {data.explicit && } - {track.artists.map((artist) => ( + {data.artists.map((artist) => ( ; - }; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; + album: { __typename: 'Album'; id: string }; } & { ' $fragmentRefs'?: { TrackNumberCell_track: TrackNumberCell_track; From e79b407bf5a4bd218e7c81fbd46c5d007a502212 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:29:23 -0700 Subject: [PATCH 54/64] Add additional fields required by the query --- client/src/routes/collection/tracks.tsx | 5 +++++ client/src/types/api.ts | 2 ++ 2 files changed, 7 insertions(+) diff --git a/client/src/routes/collection/tracks.tsx b/client/src/routes/collection/tracks.tsx index 66107b90..5e4164d0 100644 --- a/client/src/routes/collection/tracks.tsx +++ b/client/src/routes/collection/tracks.tsx @@ -54,9 +54,14 @@ const COLLECTION_TRACKS_ROUTE_QUERY = gql` id name durationMs + uri album { id } + artists { + id + name + } ...TrackNumberCell_track ...TrackTitleCell_track diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 843082ba..ded2a2a1 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3664,7 +3664,9 @@ export type CollectionTracksRouteQuery = { id: string; name: string; durationMs: number; + uri: string; album: { __typename: 'Album'; id: string }; + artists: Array<{ __typename: 'Artist'; id: string; name: string }>; } & { ' $fragmentRefs'?: { TrackNumberCell_track: TrackNumberCell_track; From 8bbcf14458cf3e6214d41fc4ab4c26006a13b3ba Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:31:19 -0700 Subject: [PATCH 55/64] Remove unused import --- client/src/routes/queue.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/routes/queue.tsx b/client/src/routes/queue.tsx index c81c75a6..dbecc474 100644 --- a/client/src/routes/queue.tsx +++ b/client/src/routes/queue.tsx @@ -8,7 +8,6 @@ import { createColumnHelper } from '@tanstack/react-table'; import { Get } from 'type-fest'; import Page from '../components/Page'; import Table from '../components/Table'; -import TrackNumberCell from '../components/TrackNumberCell'; import TrackPositionCell from '../components/TrackPositionCell'; import TrackTitleCell from '../components/TrackTitleCell'; import usePlaybackState from '../hooks/usePlaybackState'; From 50747beda19219ca78fd5eb15312e08083b868fc Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:41:41 -0700 Subject: [PATCH 56/64] Update EpisodeDetailsCell to use data masking --- client/src/components/EpisodeDetailsCell.tsx | 36 +++++++--- client/src/routes/queue.tsx | 10 +-- client/src/types/api.ts | 71 ++------------------ 3 files changed, 37 insertions(+), 80 deletions(-) diff --git a/client/src/components/EpisodeDetailsCell.tsx b/client/src/components/EpisodeDetailsCell.tsx index e06b6e06..4d866315 100644 --- a/client/src/components/EpisodeDetailsCell.tsx +++ b/client/src/components/EpisodeDetailsCell.tsx @@ -1,5 +1,10 @@ -import { gql } from '@apollo/client'; -import { EpisodeDetailsCell_episode as Episode } from '../types/api'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; +import { EpisodeDetailsCell_episode } from '../types/api'; import { thumbnail } from '../utils/image'; import CoverPhoto from './CoverPhoto'; import EntityLink from './EntityLink'; @@ -7,10 +12,10 @@ import ExplicitBadge from './ExplicitBadge'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface EpisodeDetailsCellProps { - episode: Episode; + episode: FragmentType; } -fragmentRegistry.register(gql` +const EpisodeDetailsCellFragment: TypedDocumentNode = gql` fragment EpisodeDetailsCell_episode on Episode { id explicit @@ -23,18 +28,29 @@ fragmentRegistry.register(gql` } } } -`); +`; + +fragmentRegistry.register(EpisodeDetailsCellFragment); const EpisodeDetailsCell = ({ episode }: EpisodeDetailsCellProps) => { + const { data, complete } = useFragment({ + fragment: EpisodeDetailsCellFragment, + from: episode, + }); + + if (!complete) { + return null; + } + return (
    - +
    - {episode.name} + {data.name}
    - {episode.explicit && } - - {episode.show.publisher} + {data.explicit && } + + {data.show.publisher}
    diff --git a/client/src/routes/queue.tsx b/client/src/routes/queue.tsx index dbecc474..d1f403c9 100644 --- a/client/src/routes/queue.tsx +++ b/client/src/routes/queue.tsx @@ -42,10 +42,10 @@ const QUEUE_ROUTE_QUERY = gql` player { playbackQueue { currentlyPlaying { - ...QueueRoute_playbackItem @unmask(mode: "migrate") + ...QueueRoute_playbackItem @unmask } queue { - ...QueueRoute_playbackItem @unmask(mode: "migrate") + ...QueueRoute_playbackItem @unmask } } } @@ -61,15 +61,15 @@ const QUEUE_ROUTE_QUERY = gql` id name } - ...TrackNumberCell_track @unmask(mode: "migrate") - ...TrackTitleCell_track @unmask(mode: "migrate") + ...TrackNumberCell_track + ...TrackTitleCell_track } ... on Episode { show { id name } - ...EpisodeDetailsCell_episode @unmask(mode: "migrate") + ...EpisodeDetailsCell_episode } } `; diff --git a/client/src/types/api.ts b/client/src/types/api.ts index ded2a2a1..dd5d0286 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3836,15 +3836,7 @@ export type QueueRouteQuery = { id: string; durationMs: number; uri: string; - explicit: boolean; - name: string; - show: { - __typename: 'Show'; - id: string; - name: string; - publisher: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; + show: { __typename: 'Show'; id: string; name: string }; } & { ' $fragmentRefs'?: { QueueRoute_playbackItem_Episode: QueueRoute_playbackItem_Episode; @@ -3856,20 +3848,7 @@ export type QueueRouteQuery = { id: string; durationMs: number; uri: string; - trackNumber: number | null; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - artists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - }>; + album: { __typename: 'Album'; id: string; name: string }; } & { ' $fragmentRefs'?: { QueueRoute_playbackItem_Track: QueueRoute_playbackItem_Track; @@ -3884,15 +3863,7 @@ export type QueueRouteQuery = { id: string; durationMs: number; uri: string; - explicit: boolean; - name: string; - show: { - __typename: 'Show'; - id: string; - name: string; - publisher: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; + show: { __typename: 'Show'; id: string; name: string }; } & { ' $fragmentRefs'?: { QueueRoute_playbackItem_Episode: QueueRoute_playbackItem_Episode; @@ -3904,20 +3875,7 @@ export type QueueRouteQuery = { id: string; durationMs: number; uri: string; - trackNumber: number | null; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - artists: Array<{ - __typename: 'Artist'; - id: string; - name: string; - }>; + album: { __typename: 'Album'; id: string; name: string }; } & { ' $fragmentRefs'?: { QueueRoute_playbackItem_Track: QueueRoute_playbackItem_Track; @@ -3936,15 +3894,7 @@ type QueueRoute_playbackItem_Episode = ({ id: string; durationMs: number; uri: string; - explicit: boolean; - name: string; - show: { - __typename: 'Show'; - id: string; - name: string; - publisher: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; + show: { __typename: 'Show'; id: string; name: string }; } & { ' $fragmentRefs'?: { EpisodeDetailsCell_episode: EpisodeDetailsCell_episode }; }) & { ' $fragmentName'?: 'QueueRoute_playbackItem_Episode' }; @@ -3954,16 +3904,7 @@ type QueueRoute_playbackItem_Track = ({ id: string; durationMs: number; uri: string; - trackNumber: number | null; - explicit: boolean; - name: string; - album: { - __typename: 'Album'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - }; - artists: Array<{ __typename: 'Artist'; id: string; name: string }>; + album: { __typename: 'Album'; id: string; name: string }; } & { ' $fragmentRefs'?: { TrackNumberCell_track: TrackNumberCell_track; From fc8927444e2173154ef0ec82166ba8bb004af510 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:44:50 -0700 Subject: [PATCH 57/64] Update EpisodeRemainingDuration to use data masking --- .../components/EpisodeRemainingDuration.tsx | 30 ++++++++++++++----- client/src/routes/shows/show.tsx | 2 +- client/src/types/api.ts | 5 ---- 3 files changed, 24 insertions(+), 13 deletions(-) diff --git a/client/src/components/EpisodeRemainingDuration.tsx b/client/src/components/EpisodeRemainingDuration.tsx index 69dd3a7e..760a25e7 100644 --- a/client/src/components/EpisodeRemainingDuration.tsx +++ b/client/src/components/EpisodeRemainingDuration.tsx @@ -1,4 +1,9 @@ -import { gql } from '@apollo/client'; +import { + FragmentType, + TypedDocumentNode, + gql, + useFragment, +} from '@apollo/client'; import { EpisodeRemainingDuration_episode as Episode } from '../types/api'; import { Check } from 'lucide-react'; import Duration from './Duration'; @@ -7,10 +12,10 @@ import ProgressBar from './ProgressBar'; import { fragmentRegistry } from '../apollo/fragmentRegistry'; interface EpisodeRemainingDurationProps { - episode: Episode; + episode: FragmentType; } -fragmentRegistry.register(gql` +const EpisodeRemainingDurationFragment: TypedDocumentNode = gql` fragment EpisodeRemainingDuration_episode on Episode { id durationMs @@ -19,12 +24,23 @@ fragmentRegistry.register(gql` resumePositionMs } } -`); +`; + +fragmentRegistry.register(EpisodeRemainingDurationFragment); const EpisodeRemainingDuration = ({ episode, }: EpisodeRemainingDurationProps) => { - const { resumePoint, durationMs } = episode; + const { data, complete } = useFragment({ + fragment: EpisodeRemainingDurationFragment, + from: episode, + }); + + if (!complete) { + return null; + } + + const { resumePoint, durationMs } = data; if (resumePoint.fullyPlayed) { return ( @@ -42,13 +58,13 @@ const EpisodeRemainingDuration = ({ {' '} left diff --git a/client/src/routes/shows/show.tsx b/client/src/routes/shows/show.tsx index 79ece313..e2f1cc01 100644 --- a/client/src/routes/shows/show.tsx +++ b/client/src/routes/shows/show.tsx @@ -35,7 +35,7 @@ const SHOW_ROUTE_QUERY = gql` precision } - ...EpisodeRemainingDuration_episode @unmask(mode: "migrate") + ...EpisodeRemainingDuration_episode } } } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index dd5d0286..6970ce1e 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -4094,11 +4094,6 @@ export type ShowRouteQuery = { date: string; precision: ReleaseDatePrecision; }; - resumePoint: { - __typename: 'ResumePoint'; - fullyPlayed: boolean; - resumePositionMs: number; - }; } & { ' $fragmentRefs'?: { EpisodeRemainingDuration_episode: EpisodeRemainingDuration_episode; From f546bb8dc2862b20f07af1845fd2ca01950cf410 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:45:45 -0700 Subject: [PATCH 58/64] Use data masking in search route --- client/src/routes/search/query.tsx | 2 +- client/src/types/api.ts | 9 +++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/client/src/routes/search/query.tsx b/client/src/routes/search/query.tsx index 6953100d..fe1b3152 100644 --- a/client/src/routes/search/query.tsx +++ b/client/src/routes/search/query.tsx @@ -17,7 +17,7 @@ const SEARCH_ROUTE_QUERY = gql` edges { node { id - ...ArtistTile_artist @unmask(mode: "migrate") + ...ArtistTile_artist } } } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 6970ce1e..a6f3270c 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3938,12 +3938,9 @@ export type SearchRouteQuery = { __typename: 'SearchArtistsConnection'; edges: Array<{ __typename: 'SearchArtistEdge'; - node: { - __typename: 'Artist'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } }; + node: { __typename: 'Artist'; id: string } & { + ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; + }; }>; } | null; } | null; From f1bfbaa571383bc98cc8103551487dad042208b0 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:47:41 -0700 Subject: [PATCH 59/64] Update episode page to use data masking --- client/src/routes/episodes/episode.tsx | 2 +- client/src/types/api.ts | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/client/src/routes/episodes/episode.tsx b/client/src/routes/episodes/episode.tsx index e211dea4..50096e01 100644 --- a/client/src/routes/episodes/episode.tsx +++ b/client/src/routes/episodes/episode.tsx @@ -27,7 +27,7 @@ const EPISODE_ROUTE_QUERY = gql` } } - ...EpisodeRemainingDuration_episode @unmask(mode: "migrate") + ...EpisodeRemainingDuration_episode } } `; diff --git a/client/src/types/api.ts b/client/src/types/api.ts index a6f3270c..c46a227f 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3699,7 +3699,6 @@ export type EpisodeRouteQuery = { __typename: 'Episode'; id: string; name: string; - durationMs: number; releaseDate: { __typename: 'ReleaseDate'; date: string; @@ -3715,11 +3714,6 @@ export type EpisodeRouteQuery = { vibrantColor: string | null; }>; }; - resumePoint: { - __typename: 'ResumePoint'; - fullyPlayed: boolean; - resumePositionMs: number; - }; } & { ' $fragmentRefs'?: { EpisodeRemainingDuration_episode: EpisodeRemainingDuration_episode; From d5578bc40ab3784e261a71515bdfe577318b6194 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:48:32 -0700 Subject: [PATCH 60/64] Update collection/albums route to use data masking --- client/src/routes/collection/albums.tsx | 2 +- client/src/types/api.ts | 12 +++--------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/client/src/routes/collection/albums.tsx b/client/src/routes/collection/albums.tsx index 3bebd137..4f20c471 100644 --- a/client/src/routes/collection/albums.tsx +++ b/client/src/routes/collection/albums.tsx @@ -20,7 +20,7 @@ const COLLECTION_ALBUMS_ROUTE_QUERY = gql` edges { node { id - ...AlbumTile_album @unmask(mode: "migrate") + ...AlbumTile_album } } } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index c46a227f..1483074f 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3421,15 +3421,9 @@ export type CollectionAlbumsRouteQuery = { }; edges: Array<{ __typename: 'SavedAlbumEdge'; - node: { - __typename: 'Album'; - id: string; - name: string; - albumType: AlbumType; - totalTracks: number; - releaseDate: { __typename: 'ReleaseDate'; date: string }; - images: Array<{ __typename: 'Image'; url: string }>; - } & { ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album } }; + node: { __typename: 'Album'; id: string } & { + ' $fragmentRefs'?: { AlbumTile_album: AlbumTile_album }; + }; }>; } | null; } | null; From c10fba5b6ee7dd8a5a1f86ea3a9c8f7af7adc5ef Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 11:59:15 -0700 Subject: [PATCH 61/64] Add some masking to collection/playlists --- client/src/routes/collection/playlists.tsx | 4 ++-- client/src/types/api.ts | 18 ++---------------- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/client/src/routes/collection/playlists.tsx b/client/src/routes/collection/playlists.tsx index f12cfc6f..e1cd30f7 100644 --- a/client/src/routes/collection/playlists.tsx +++ b/client/src/routes/collection/playlists.tsx @@ -52,7 +52,7 @@ const COLLECTION_PLAYLISTS_ROUTE_QUERY = gql` edges { node { id - ...PlaylistTile_playlist @unmask(mode: "migrate") + ...PlaylistTile_playlist } } } @@ -73,7 +73,7 @@ const PAGINATED_QUERY = gql` edges { node { id - ...PlaylistTile_playlist @unmask(mode: "migrate") + ...PlaylistTile_playlist } } } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 1483074f..93d4a216 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3501,14 +3501,7 @@ export type CollectionPlaylistsRouteQuery = { }; edges: Array<{ __typename: 'PlaylistEdge'; - node: { - __typename: 'Playlist'; - id: string; - name: string; - description: string | null; - uri: string; - images: Array<{ __typename: 'Image'; url: string }> | null; - } & { + node: { __typename: 'Playlist'; id: string } & { ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; @@ -3534,14 +3527,7 @@ export type CollectionPlaylistsRoutePaginatedQuery = { }; edges: Array<{ __typename: 'PlaylistEdge'; - node: { - __typename: 'Playlist'; - id: string; - name: string; - description: string | null; - uri: string; - images: Array<{ __typename: 'Image'; url: string }> | null; - } & { + node: { __typename: 'Playlist'; id: string } & { ' $fragmentRefs'?: { PlaylistTile_playlist: PlaylistTile_playlist }; }; }>; From 4e677302a9fecd9d4d4ab360e331764d35611900 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 12:00:48 -0700 Subject: [PATCH 62/64] Use masking on collection/artists route --- client/src/routes/collection/artists.tsx | 2 +- client/src/types/api.ts | 9 +++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/client/src/routes/collection/artists.tsx b/client/src/routes/collection/artists.tsx index 43231e89..862853a0 100644 --- a/client/src/routes/collection/artists.tsx +++ b/client/src/routes/collection/artists.tsx @@ -20,7 +20,7 @@ const COLLECTION_ARTISTS_ROUTE_QUERY = gql` edges { node { id - ...ArtistTile_artist @unmask(mode: "migrate") + ...ArtistTile_artist } } } diff --git a/client/src/types/api.ts b/client/src/types/api.ts index 93d4a216..db274e85 100644 --- a/client/src/types/api.ts +++ b/client/src/types/api.ts @@ -3444,12 +3444,9 @@ export type CollectionArtistsRouteQuery = { }; edges: Array<{ __typename: 'FollowedArtistEdge'; - node: { - __typename: 'Artist'; - id: string; - name: string; - images: Array<{ __typename: 'Image'; url: string }>; - } & { ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist } }; + node: { __typename: 'Artist'; id: string } & { + ' $fragmentRefs'?: { ArtistTile_artist: ArtistTile_artist }; + }; }>; } | null; } | null; From 0436250eea88034460cad89193bb262d4e272272 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 12:01:14 -0700 Subject: [PATCH 63/64] Remove migrate mode from settings query --- client/src/routes/settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/routes/settings.tsx b/client/src/routes/settings.tsx index b44630b2..be525f71 100644 --- a/client/src/routes/settings.tsx +++ b/client/src/routes/settings.tsx @@ -46,7 +46,7 @@ const LIMITED_INTROSPECTION_QUERY: TypedDocumentNode< name description type { - ...TypeRef @unmask(mode: "migrate") + ...TypeRef @unmask } } } From 176a2580caac77b673e0452edb5767ea54908aa0 Mon Sep 17 00:00:00 2001 From: Jerel Miller Date: Fri, 15 Nov 2024 12:01:52 -0700 Subject: [PATCH 64/64] Remove unused import --- client/src/routes/collection/podcasts.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/routes/collection/podcasts.tsx b/client/src/routes/collection/podcasts.tsx index 82afd891..786c57c0 100644 --- a/client/src/routes/collection/podcasts.tsx +++ b/client/src/routes/collection/podcasts.tsx @@ -1,5 +1,4 @@ import { gql, useSuspenseQuery, TypedDocumentNode } from '@apollo/client'; -import CoverPhoto from '../../components/CoverPhoto'; import MediaTile from '../../components/MediaTile'; import OffsetBasedPaginationObserver from '../../components/OffsetBasedPaginationObserver'; import Skeleton from '../../components/Skeleton';