gatsby-source-pixiv

npm version npm PRs Welcome NPM Netlify Status

Source plugin for sourcing data from Pixiv.

Demos

gatsby-source-pixiv.netlify.app

Table of Contents

Install

npm install --save gatsby-source-pixiv

How to use

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: {
      username: process.env.USERNAME,
      password: process.env.PASSWORD,
      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: {
      username: process.env.USERNAME,
      password: process.env.PASSWORD,
      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 userid, name, …)
  • preview
  • mediaType
  • tags
  • tools
query {
  allPixivNode {
    edges {
      node {
        id
        totalBookmarks
        totalComments
        totalView
        title
        caption
        localFile {
          childImageSharp {
            fluid(quality: 70, maxWidth: 600, maxHeight: 600) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
  }
}

User profile information

Fields include:

  • id
  • username
  • biography
  • profilepicurl
  • backgroundpicurl
  • data
query {
  pixivUserNode {
    id
    username
    biography
    data {
      profile {
        totalFollowUsers
        totalIllusts
      }
    }
    localFile {
      childImageSharp {
        fluid(quality: 100) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
}

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.