grid-cms-sdk

The grid-cms fetcher library

Usage no npm install needed!

<script type="module">
  import gridCmsSdk from 'https://cdn.skypack.dev/grid-cms-sdk';
</script>

README

Grid CMS is a Headress CMS service that uses Google Sheets. All data can be managed in spreadsheets and is simple. Make CMS simpler.

This package is a fetcher library for grid-cms

What is Grid CMS?

Grid CMS Tutorial

1. begin grid-cms-SDK

npm i grid-cms-sdk
// or //
yarn add grid-cms-sdk

2. create-client

import { createClient } from "grid-cms-sdk/dist";

const client = createClient({
  email: "YOUR_GOOGLE_SERVICE_ACCOUNT_EMAIL",
  privateKey: "YOUR_GOOGLE_PRIVATE_KEY",
});

3. get sheet data for Next.js SSG

The image below is sample data.

sample

Basic

import { getSheet } from "grid-cms-sdk/dist";
import { client } from "src/gridCMS"

export const getStaticProps = async () => {
  const res = await getSheet<any>(
    client,
    {
      spreadsheetId: "SPREAD_SHEET_ID",
      range: "SHEET_NAME",
    }
  );

  return {
    props: {
      result: res.contents,
      total: res.totalCount,
    }
  };
};

Pagination

import { getSheet } from "grid-cms-sdk/dist";
import { client } from "src/gridCMS"

export const getStaticProps = async () => {
  const res = await getSheet<any>(
    client,
    {
      spreadsheetId: "SPREAD_SHEET_ID",
      range: "SHEET_NAME",
    },
    {
      pagenation: {
        limit: 5 // Number of data to be displayed per page,
        offset: 0 // Current number of pages minus 1,
      },
    }
  );

  return {
    props: {
      result: res.contents,
      total: res.totalCount,
    }
  };
};

Multiple contents

import { getSheet } from "grid-cms-sdk/dist";
import { client } from "src/gridCMS"

export const getStaticProps = async () => {
  const results = await getSheets(
    client,
    {
      spreadsheetId: "SPREAD_SHEET_ID",
      ranges: ["sheet1", "sheet2", "sheet3"],
    },
    // Any option
    {
      pagenation: {
        limit: 5,
        offset: 0,
      },
    }
  );

  return {
    props: {
      results
    }
  };
};

Request

Name Required Types rescription
createClient Client:{ email: string, privateKey: string } email: Your Google Service Account email.
privateKey: Your Google Service Account private_key.
getSheet Client, Option: { spreadsheetId: string; range: string; }, queries?: { pagenation: { limit: number; offset: number; } } spreadsheetId: Your spreadsheet ID.
range: Your shpreadsheet sheet name.
limit: Number of data to be displayed per page.
offset: Current number of pages minus 1
getSheets Client, Option: { spreadsheetId: string; ranges: Array<string>; }, queries?: { pagenation: { limit: number; offset: number; } } ranges: Your shpreadsheet sheet names.

Response

Name Required Types rescription
createClient - JWT JWT class in google auth library.
getSheet - contents: T[];
colms: string[];
totalCount: number;
contents: If you add a type argument to the getSheet API, it will be returned as an array of the attached type.
colms: Return the first row of data with the spreadsheet.
totalCount: Total number of contents.
getSheets - Array{ contents: any[]; colms: string[]; totalCount: number; } contents: Return data from the second row onward for each spreadsheet specified in ranges as JSON.
colms: Returns a string array of the first row of data for each spreadsheet specified by ranges.
totalCount: Total number of contents for each spreadsheet specified in ranges.