EDIT: J'ai fini par créer une petite reproduction de mon problème et l'ai posté sur le GitHub de Gatsby et j'ai fini par obtenir de l'aide.
Voici le lien vers ce numéro!
Je suis désolé à l'avance si ce problème a été traité ailleurs mais je n'ai pas trouvé de réponse à ce dont j'ai besoin.
Je travaille actuellement avec des fichiers Gatsby, GraphQl et YAML et j'ai plusieurs sections sur lesquelles je mappe, mais certaines ont des images et d'autres pas.
J'ai défini mon GraphQL en indiquant l'image avec childImageSharp
sections: - title: Title 1 description: Description 1 - title: Title 2 description: Description 2 imageHere: Image1
et j'ai vu une solution qui impliquait d'ajouter ceci à mon gatsby-node.js afin que les chemins puissent être correctement lus à partir de mes fichiers YAML
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions;
const typeDefs = `
type allProjectPageYaml implements Node {
imageHere: [String]!
}
`;
createTypes(typeDefs);
};
Maintenant, mon problème est que certaines sections ont le champ imageHere et d'autres pas
sections {
title
description
imageHere {
childImageSharp {
fluid(maxWidth: 600) {
...GatsbyImageSharpFluid_noBase64
}
}
}
L'erreur que j'obtiens est TypeError: impossible de lire la propriété 'childImageSharp' de null
Quelle est ma solution de contournement?
4 Réponses :
Vous avez défini imageHere comme un tableau obligatoire de chaînes avec ceci: imageHere: [String]! .
S'il est en fait censé être un nœud d'image facultatif, vous voudrez peut-être le définir à la place comme le type correct (quelque chose comme GatsbyImage , mais je ne me souviens pas exactement de quoi il est libre - vous devriez pouvoir vérifier graphiql) . Cela ressemblerait plus à imageHere: GatsbyImage (pas de bang, pas de crochets).
Merci pour votre réponse, mais j'ai pris cela en considération et j'ai changé plus tard mon '[String]! à «Fichier» puisque, selon ce lien sur la page de Gatsby , il devrait s'agir d'un fichier. Cependant, cela échoue toujours sur moi. En fait, maintenant, il échoue sur une page de modèle que j'ai créée à partir de celle-ci. Il semble que childImageSharp ne prend pas le chemin de mon image et ne le suppose pas comme un chemin réel. Au lieu de cela, il l'affiche sous forme de chaîne. Une idée de ce qui cause cela?
@ItzaMi Oh doux, c'est généralement ce qui se passe lorsque le système d'inférence de Gatsby rencontre un nœud qui ne se résout pas proprement en un fichier sur le système. Même s'il ne s'agit que de 1 et que les 999 autres fonctionnent, le nœud est traité comme un type de chaîne.
alors quelle est la solution pour cela? Je suis assez novice chez Gatsby et c'est la première fois que je rencontre quelque chose comme ça
@ItzaMi Vous devrez découvrir quel chemin n'est pas valide. C'est un processus manuel pour autant que je sache.
J'ai fini par créer une petite reproduction de mon problème et l'ai posté sur Gatsby's GitHub et j'ai fini par obtenir de l'aide.
Voici le lien vers ce numéro!
Vérifiez l'orthographe du chemin de fichier auquel ChildImageSharp tente de référencer. Lorsque j'obtenais cette erreur, le chemin du fichier img devait être corrigé.
pour moi, c'était un problème de mise en cache, essayez de supprimer .cache, public, dirs ou run
"resolutions": {
"sharp": "0.24.0"
}
MISE À JOUR
si vous utilisez netlify ci / cd, vous devez également l'ajouter dans package.json
gatsby clean
https://community.netlify.com/t/error-input-file-contains-unsupported-image-format-gatsby/10891/4
Êtes-vous sûr que le typeError est déclenché par la requête graphql et non par le js qui tente d'accéder à la propriété? Dans ce dernier cas, vous pouvez utiliser une vérification approfondie des propriétés, quelque chose comme: const image = data.sections.imageHere? .ChildImageSharp