I am using Gatsby 3.6.1, with Gatsby plugin image. I am fetching images from an API which returns the following structure:
[
{
"pk": 1,
"url": "https://location_of_the_image1",
},
{
"pk": 2,
"url": "https://location_of_the_image2",
},
]
These images are stored within the nodes API__Image
and then I use createRemoteFileNode
to create a local version of the file within the API__Image.image
field:
exports.onCreateNode = async ({
node,
actions: { createNode },
store,
cache,
createNodeId,
}) => {
if (node.internal.type === `API__Image` && node.pk) {
let fileNode = await createRemoteFileNode({
url: node.url, // string that points to the URL of the image
parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
createNode, // helper function in gatsby-node to generate the node
createNodeId: id => `IMG${node.pk}`,
cache, // Gatsby's cache
store, // Gatsby's Redux store
})
// if the file was created, attach the new node to the parent node
if (fileNode) {
node.image___NODE = fileNode.id
}
}
}
The problem with this setup is that it returns the following error when using gatsby develop
or gatsby build
more than once:
Invariant Violation: Encountered an error trying to infer a GraphQL type for: "image___NODE". There is no corresponding node with the "id" field matching: "IMG286,IMG287...
How should I create a proper type definition for this code? I have tried following the example of this page, but I keep getting the same error:
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions
const typeDefs = `
type API__Image implements Node {
pk: ID!
url: String!
image: File @link(from: "image___NODE")
}
`
createTypes(typeDefs)
}
Another interesting question, why the node internal type is called API__Image
but nonetheless when accessing GraphQL at http://localhost:8000/___graphql
it is displayed as apiImage
? Should I use API__Image
or apiImage
when defining the GraphQL Type?