Использование Gatsby `createResolvers` для установки изображения по умолчанию, если GraphQL возвращает null? - PullRequest
Новая
       10

Использование Gatsby `createResolvers` для установки изображения по умолчанию, если GraphQL возвращает null?

0 голосов
/ 12 января 2020

Я работаю над сайтом , использующим gatsby-source-wordpress для публикации постов в блоге. Тем не менее, если какие-либо сообщения WordPress не включают избранные изображения, это приводит к сбою сборки. Я понимаю, что это ожидаемое поведение.

Вот ошибка сборки, которую я вижу: 

  29 |           {posts.map(({ node: post }, index) => ( 
  30 |             <li key={post.id} {...post}>
> 31 |               <Img fixed={post.featured_media.localFile.childImageSharp.fixed} />
     |                                               ^
  32 |               <p>
  33 |                 <Link to={`/insights/${post.slug}`}>
  34 |                   {post.title}

  WebpackError: TypeError: Cannot read property 'localFile' of null

Это вызвано результирующим запросом, который возвращает нулевой результат во втором узле потому что на посту нет показанного изображения: 

{
  "data": {
    "allWordpressPost": {
      "edges": [
        {
          "node": {
            "id": "28ec9054-5b05-5f94-adcb-dcbfc14659b1",
            "featured_media": {
              "id": "f12d613b-e544-560b-a86f-cd0a7f87801e",
              "localFile": {
                "id": "7fca2893-ff80-5270-9765-d17d3dc21ac2",
                "url": "https://www.mycustomdomain.com/wp-content/uploads/2020/01/some-featured-image.jpg"
              }
            }
          }
        },
        {
          "node": {
            "id": "91a236ed-39d5-5efc-8bed-290d8344b660",
            "featured_media": null
          }
        }
      ]
    }
  }
}

Как я хотел бы исправить:

В качестве идеального решения я хотел бы использовать настройку схемы для установки изображения по умолчанию, если В WordPress нет рекомендуемого изображения. Но я в полной растерянности, как правильно это сделать. Я работаю с этой документацией , чтобы направлять меня, но мне просто не удается правильно обернуть вокруг нее голову.

Аналогичный рабочий пример:

Данные тега похожи на избранные изображения в том смысле, что запрос возвращает ноль, если запись не имеет тегов. Однако я могу установить тег undefined по умолчанию, используя createResolvers следующим образом: 

exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    wordpress__POST: {
      tags: {
        resolve(source, args, context, info) {
          const { tags } = source
          if (tags === null || (Array.isArray(tags) && !tags.length)) {
            return [
              {
                id: 'undefined',
                name: 'undefined',
                slug: 'undefined',
              }
            ]
          } else {
            return info.originalResolver(source, args, context, info)
          }
        },
      },
    },
  }
  createResolvers(resolvers)
}

И это работает, как показано в следующих результатах запроса: 

{
  "data": {
    "allWordpressPost": {
      "edges": [
        {
          "node": {
            "id": "28ec9054-5b05-5f94-adcb-dcbfc14659b1",
            "tags": [
              {
                "id": "undefined"
              }
            ]
          }
        },
        {
          "node": {
            "id": "91a236ed-39d5-5efc-8bed-290d8344b660",
            "tags": [
              {
                "id": "50449e18-bef7-566a-a3eb-9f7990084afb"
              },
              {
                "id": "8635ff58-2997-510a-9eea-fe2b88f30781"
              },
              {
                "id": "97029bee-4dec-5198-95af-8464393f71e3"
              }
            ]
          }
        }
      ]
    }
  }
}

Что я попробовал для изображений (не работает ...)

Когда дело доходит до вложенных узлов и файлов изображений, я в полной растерянности. Я направляюсь в следующем направлении на основе этой статьи и этого примера кода , но пока он не работает: 

exports.createResolvers = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  const resolvers = {
    wordpress__POST: {
      featured_media: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: 'https://www.mycustomdomain.com/wp-content/uploads/2017/05/placeholder.png',
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  }
  createResolvers(resolvers)
}

Я понимаю, что выше В коде нет оператора if else, поэтому ожидается, что все избранные изображения будут заменены на изображения-заполнители. Однако на полученный запрос GraphQL это не влияет (как показано вверху).

Может кто-нибудь указать мне правильное направление здесь? Кажется, я не могу понять, какую информацию я могу там найти.

1 Ответ

0 голосов
/ 12 января 2020

WebpackError: TypeError: Невозможно прочитать свойство 'localFile' со значением NULL

'localFile' of null означает, что значение nulled является родительским для localfile - featured_media ... вы можете видеть что в результатах:

"featured_media": null

... поэтому вы пытаетесь исправить localfile, в то время как вы должны работать на уровне featured_media

почему?

Вы можете легко сделать условно [в реакции] то, что вам нужно (плацхолд, компонент) на обнуляемых узлах ... почему вообще вы пытаетесь исправить ответ graphql?

...