Как разрешить необязательное четкое изображение в графике Гэтсби? - PullRequest
Новая
       31

Как разрешить необязательное четкое изображение в графике Гэтсби?

1 голос
/ 19 февраля 2020

У меня обычно есть frontmatter, который будет иметь массив объектов, внутри каждого объекта будет изображение, которое будет ссылаться на строку файла относительно файла уценки.

Проблема в том, что массив может иногда быть пустым, то есть graphql должен будет решить, что такое схема, установив все значения не равными NULL, я смог сделать это с простыми типами, такими как строки, используя createSchemaCustomization Гэтсби, но я хочу иметь возможность объявите строку, которая ссылается на изображение, чтобы использовать Image Sharp (чтобы gatsby-transformer-sharp мог сжать изображение до того, как компонент его получит).

Это не похоже нигде в документации Gatsby или плагине sharp для изображений что для этого есть тип схемы.

Я пытался использовать File! в качестве типа, который работает, когда массив пуст, но когда вы на самом деле пытаетесь сослаться на реальные изображения, он просто возвращает { image: childImageSharp: null }, что означает gatsby-transformer. -Sharp не работает на них, как это происходит, когда File! не декалируется.

Ниже показано, как моя схема была объявлена: 

exports.createSchemaCustomization = ({ actions }) => {
    const { createTypes } = actions;
    const typeDefs = `
        type MarkdownRemark implements Node {
            frontmatter: Frontmatter
        }
        type Frontmatter {
          features: [Feature!]!
        }
        type Feature {
            title: String!
            description: String!
            image: File!
        }
    `;

    createTypes(typeDefs);
};

Это мой запрос graphql: 

export const query = graphql`
    query HomeQuery($path: String!) {
        markdownRemark(frontmatter: { path: { eq: $path } }) {
            html
            frontmatter {
                features {
                    title
                    description
                    image {
                        childImageSharp {
                            fluid(maxWidth: 800) {
                                ...GatsbyImageSharpFluid
                            }
                        }
                    }
                }
            }
        }
    }
`;

И мой файл уценки, который возвращает массив объектов объектов, image является строкой, которая должен создать плавный объект с резким изображением. 

---
path: '/'
features:
    - title: Barns
      description: Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
      image: features-001.png
    - title: Private Events
      description: Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
      image: features-002.png
    - title: Food and Drinks
      description: Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
      image: features-003.png
    - title: Spa
      description: Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit.
      image: features-004.png
---

В качестве обзора, как только я удалю File! на createSchemaCustomization, все изображения появятся, но сборка сломается, как только массив пуст.

1 Ответ

1 голос
/ 06 апреля 2020

После нескольких месяцев поиска и выключения мне удалось отработать его, я был прав, используя тип File, причина, по которой он возвращался пустым на существующих изображениях, заключается в том, что мне не хватало когда-либо особой директивы @fileByRelativePath.

Для всех тех, кто борется с этим, у вас должна быть экспортированная функция createShcemaCustomization в вашем gatsby-node.js, здесь вы должны сконфигурировать свойства вашего frontmatter, которые вы хотели бы предоставить ненулевым значения на. 

exports.createSchemaCustomization = ({ actions, schema }) => {
    const { createTypes } = actions;

    const typeDefs = [
        `type MarkdownRemark implements Node {
            frontmatter: Frontmatter
        }`,
        `type Frontmatter @infer {
            about_hero_slides: [File!]! @fileByRelativePath,
            about_title: String,
            about_text: String,
            about_images: [File!]! @fileByRelativePath,
        }`,
    ];

    createTypes(typeDefs);
};

Как только я добавил в @infer для типа Frontmatter и @fileByRelativePath к каждому свойству File, он мгновенно разрешил любые изображения, и все несуществующие изображения просто вернутся null вместо выдачи ошибки!

...