Source plugin for sourcing data from Pixiv.

Demos

gatsby-source-pixiv.netlify.app

Table of Contents

• Install
• How to use
  • How to get the refreshToken
  • API for illustrations
  • API for a user's profile
• How to query
  • Illustrations
  • User profile information
• Image processing

Install

npm install --save gatsby-source-pixiv

How to use

How to get the refreshToken

Follow this steps: https://gist.github.com/ZipFile/c9ebedb224406f4f11845ab700124362#file-pixiv_auth-py

API for illustrations

If you want to get all illustrations then you need to pass the concerning user ID (e.g. https://www.pixiv.net/users/19859044).

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-pixiv`,
    options: {
      refreshToken: process.env.REFRESH_TOKEN,
      type: 'illusts',
      user_id: 19859044,
      maxArtworks: 100,
    },
  },
]

The maxArtworks parameter enables us to limit the maximum number of the artwork we will store. Defaults to undefined (no limit).

API for a user's profile

If you want to source a user's profile from their user ID then you need the following:

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-pixiv`,
    options: {
      refreshToken: process.env.REFRESH_TOKEN,
      type: `user-profile`,
      user_id: 19859044,
    },
  },
]

How to query

Illustrations

The plugin tries to provide uniform results regardless of the way you choose to retrieve the information

Common fields include:

• id
• totalBookmarks
• totalComments
• totalView
• original
• timestamp
• title
• caption
• user (contains user_id_, name, ...)
• preview
• mediaType
• tags
• tools

query {
  allPixivNode {
    edges {
      node {
        id
        totalBookmarks
        totalComments
        totalView
        title
        caption
        localFile {
          childImageSharp {
            gatsbyImageData (
              width: 600,
              height: 600,
              formats: [AUTO, WEBP, AVIF]
            )
          }
        }
      }
    }
  }
}

User profile information

Fields include:

• id
• username
• biography
• profile_pic_url
• background_pic_url
• data

query {
  pixivUserNode {
    id
    username
    biography
    data {
      profile {
        total_follow_users
        total_illusts
      }
    }
    localFile {
      childImageSharp {
        gatsbyImageData(
          formats: [AUTO, WEBP, AVIF]
        )
      }
    }
  }
}

Image processing

To use image processing you need gatsby-transformer-sharp, gatsby-plugin-sharp and their dependencies gatsby-image and gatsby-source-filesystem in your gatsby-config.js.

You can apply image processing on each pixiv node. To access image processing in your queries you need to use the localFile on the PixivNode as shown above.