Starting a New Resume Project

For all new versions of my resume going forward I should stick to using the current GraphCMS setup for storing content and only create new frontends for the resume. This is a guide on getting setup to sue the GraphCMS stuff.

Initial Setup

• Initialise a new project
• Add the codegen.yml and graphql.schema.json files in this gist to your project's root
• Create a src/graphql folder and move all of the .graphql files in this gist into it
• Run the following:

yarn add graphql graphql-request

yarn add --dev @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-graphql-request @graphql-codegen/typescript-operations concurrently

• Add a new script to package.json

{
	"codegen": "graphql-codegen --config codegen.yml"
}

• Change the script you use to run the project in development mode to this:

concurrently \"your-original-start-script\" \"yarn codegen\"

• Run yarn codegen in the terminal, you should now have a src/lib/cms/generated.ts file containing the generated typescript code

Additional Code Setup

• Create a file .env at your projects root (make sure it does not get ignored by git) and paste in the following:

GRAPHQL_ENDPOINT=https://api-ap-southeast-2.graphcms.com/v2/cl3moi00i2dop01xi3ukohzp2/master

• Create a new file src/lib/cms/client.ts and paste in the following

import { GraphQLClient } from "graphql-request";
import { getSdk } from "./generated";

const baseClient = new GraphQLClient(process.env.GRAPHQL_ENDPOINT ?? "");

const client = getSdk(baseClient);

export default client;

• Create a new file src/lib/cms/index.ts and paste in the following

export { default as client } from "./client";

export * from "./generated";

Fetching Data

You can now run queries by importing the client object from src/lib/cms and running its methods.

Extending

If you want to add additional types of queries that can be performed using the client, you can do so by just creating a new query inside any .graphql file located inside src/graphql