gatsby-source-pixiv
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
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.