Skip to content

Instantly share code, notes, and snippets.

@leomelzer
Created Feb 2, 2021
Embed
What would you like to do?
Set SVG dimensions in GraphCMS
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();
})();
{
"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"
}
}
{
"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"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment