@teh23/gatsby-source-api NPM

GATSBY-SOURCE-API

Getting Started

install package with yarn or npm:

npm:

npm install @teh23/gatsby-source-api

yarn:

yarn add @teh23/gatsby-source-api

Parameters

Name	Type	Description
url	string	`Required.` Url of your API.
schema	string	`Required.` Define default-schemas for the objects of your API.
baseType	string	`Required.` Root name of node
auth	object	Define the auth for your API in the following format: `{ username: "username", password: "password" }`. Auth also authorizes image downloads
images	array	Define the keys of images. Value of images must be a `url`. Gatsby-Images are added as name of images keys with suffix `Local`. Important keys must be unique
transform	array	`[{name: "fieldName", func: (node) => ...} ]` func for argument take node

How to use

1. Basic usage

url, baseType, schema are required values. Schema is shape of the data and to avoid unwanted errors is required, baseType is name of your root node name for example below is albums we use it in baseType and in schema for more details check it out: https://graphql.org/learn/schema/ https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/

plugins: [
   //... others plugins
    {
      resolve: `@teh23/gatsby-source-api`,
      options: {
        //Url of your API. REQUIRED
        url: "https://jsonplaceholder.typicode.com/albums/1/photos",
        //Root name of node. REQUIRED
        baseType: "albums",
        //Schema is shape of the data. REQUIRED
        schema: `
          type albums implements Node {
            albumId: Int
            id: Int
            title: String
            url: String
            thumbnailUrl: String
          }
        `
      },
  ],

2. Download images

We are putting keys of urls which we want download into arrays. Also, we have to link download images. ${imageName}Local: File @link(by: "id", from: "${imageName}Local___NODE") relax if u dont understand what the heck it is doing there, look below

plugins: [
   //... others plugins
    {
      resolve: `@teh23/gatsby-source-api`,
      options: {
        url: "https://jsonplaceholder.typicode.com/albums/1/photos",
        baseType: "albums",
        //array for images is require even for one value
        images: ['url', 'thumbnailUrl']
        schema: `
          type albums implements Node {
            albumId: Int
            id: Int
            title: String
            url: String
            thumbnailUrl: String
            
            urlLocal: File @link(by: "id", from: "urlLocal___NODE")
            thumbnailUrlLocal: File @link(by: "id", from: "thumbnailUrlLocal___NODE")
          }
        `
      },
  ],

npm.io

3. Add or edit

name is field name if given field doesn't exist it will be added, plugin use lodash set https://lodash.com/docs/4.17.15#set You can add or edit easily deep object for example:

const object = {
  id: 1,
  address: {
    info: {
      sth: 'hi'
    }
  }
}
//... some code
transform: [
  { 
    name: 'address.info.sth',
    func: ({address: {info: { sth }}}) => `${sth} world`
  },
  //this will add new data to object
  {
    name: 'address.info.sth.newbranch[0].exist',
    func: ({address: {info: { sth }}}) => `world ${sth}`
  }
]

func is callback function for args it take row of your data

plugins: [
  //... other plugins
  {
    resolve: `@teh23/gatsby-source-api`,
    options: {
      url: 'https://jsonplaceholder.typicode.com/albums/1/photos',
      baseType: 'albums',
      //array for images is require even for one value
      images: ['url', 'thumbnailUrl', 'test'],
      transform: [
        {
          name: 'test',
          func: ({ id }) => `https://via.placeholder.com/${id * 10}`

        },
        {
          name: 'title',
          func: (row) => {
            const { title, albumId } = row
            return `${albumId}-${title}`
          }
        }

      ],
      schema: `
          type albums implements Node {
            albumId: Int
            id: Int
            title: String
            url: String
            thumbnailUrl: String
            test: String
            
            testLocal: File @link(by: "id", from: "testLocal___NODE")
            urlLocal: File @link(by: "id", from: "urlLocal___NODE")
            thumbnailUrlLocal: File @link(by: "id", from: "thumbnailUrlLocal___NODE")
          }
        `
    },
  }
]

npm.io