Set SVG dimensions in GraphCMS

index.ts

import fetch from "node-fetch";
import imageSize from "image-size";
import { GraphQLClient, gql } from "graphql-request";

const ENDPOINT =
  "https://api-eu-central-1.graphcms.com/v2/myProject/master";
const TOKEN =
  "myTokenWithMutationPrivileges";

type Asset = Record<"id" | "handle" | "url", string> &
  Record<"svgWidth" | "svgHeight", number>;

const extractSize = async (url: string) => {
  const response = await fetch(url);
  const svg = await response.buffer();
  const dimensions = imageSize(svg);

  if (dimensions.width === undefined) {
    throw new Error(`${url} SVG was empty?`);
  }

  return dimensions;
};

const main = async () => {
  const client = new GraphQLClient(ENDPOINT, {
    headers: {
      Authorization: `Bearer ${TOKEN}`,
    },
  });

  const { assets } = await client.request<{ assets: Array<Asset> }>(gql`
    query {
      assets(where: { mimeType_contains: "svg" }) {
        id
        handle
        url
        svgWidth
        svgHeight
      }
    }
  `);

  const todo = assets.filter((asset) => asset.svgWidth === null);

  console.log({ todo });

  const processed = await Promise.all(
    todo.map(async (asset) => {
      const dimensions = await extractSize(asset.url);

      return {
        id: asset.id,
        svgWidth: dimensions.width,
        svgHeight: dimensions.height,
        url: asset.url,
      };
    })
  );

  const mutation = gql`
    mutation UpdateAsset($svgHeight: Int!, $svgWidth: Int!, $id: ID!) {
      updateAsset(
        data: { svgHeight: $svgHeight, svgWidth: $svgWidth }
        where: { id: $id }
      ) {
        id
      }
    }
  `;

  console.log({ mutations: processed });

  await Promise.all(
    processed.map(async (asset) => client.request(mutation, asset))
  );
};

(async () => {
  await main();
})();

package.json

{
  "name": "svg-dimensions",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "tsc --watch",
    "dev": "nodemon dist/index.js"
  },
  "keywords": [],
  "author": "Leonhard Melzer",
  "license": "ISC",
  "dependencies": {
    "graphql": "^15.5.0",
    "graphql-request": "^3.4.0",
    "image-size": "^0.9.3"
  },
  "devDependencies": {
    "@types/node": "^14.14.22",
    "@types/node-fetch": "^2.5.8",
    "nodemon": "^2.0.7",
    "typescript": "^4.1.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": [
      "dom",
      "es6",
      "es2017",
      "esnext.asynciterable"
    ],
    "sourceMap": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "resolveJsonModule": true,
    "baseUrl": "."
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src/**/*.tsx",
    "./src/**/*.ts"
  ]
}