在 Gatsby / GraphQL 中没有获得“img”的下拉菜单答案

【问题标题】：Not getting a drop down menu for "img" in Gatsby / GraphQL在 Gatsby / GraphQL 中没有获得“img”的下拉菜单
【发布时间】：2021-07-22 04:56:08
【问题描述】：

我关注this tutorial。

我的数据文件夹中有trips.json

[
    {
        "img": "../assests/images/bahamas.jpg",
        "name": "Bahama Beach"
    },
    {
        "img": "../assests/images/china.jpg",
        "name": "Chinese Palace"
    },
    {
        "img": "../assests/images/dubai.jpg",
        "name": "dubai"
    },
    {
        "img": "../assests/images/monke.jpg",
        "name": "monke",
        "alt": "monke monke monke monke"
    }
]

这是我的 gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `My Gatsby Project`,
    description: `Made with Gatsby.`,
    author: `@gatsbyjs`,
    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
  },
  plugins: [
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./src/data`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `videos`,
        path: `${__dirname}/src/assets/videos`,
      },
    },
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here
        author: `me`,
      },
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-gatsby-cloud`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

在 localhost:8000/__graphql，我得到一个“img”复选框。

但是，本教程大量使用了“img”属性中的许多属性。

我已尝试停止该进程，请执行gatsby clean 并重新启动该进程。

所以我想弄清楚为什么我没有看到这个，以及如何让这个下拉菜单出现在我的屏幕上。

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

通过将以下内容添加到gatsby-node.js来解决它

exports.createResolvers = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  createResolvers({
    StrapiPageContentArticleGallery: {
      imageFile: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: `${source.url}`, // for S3 upload. For local: `http://localhost:1337${source.url}`,
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  })
}

【讨论】：