如何为Gatsby页面查询创建自定义解析器？

问题描述

我有一个Gatsby应用程序从Sanity中提取数据。这是course.js的健全性架构：

import video from './video'

export default {
    // Computer name
    name: `courses`,
    // Visible title
    title: `Courses`,
    type: `document`,
    fields: [
        {
            name: `title`,
            title: `Course title`,
            type: `string`,
            description: `Name of the course`
        },
        {
            name: `slug`,
            title: `slug`,
            type: `slug`,
            options: {
                source: `title`,
                maxLength: 100,
            }
        },
        {
            name: `price`,
            title: `Price`,
            type: `number`
        },
        {
            name: `thumbnail`,
            title: `Thumbnail`,
            type: `image`,
            options: {
                hotspot: true,
            }
        },
        {
            name: `playlist`,
            title: `Playlist`,
            type: `array`,
            of: [
                {
                    title: `Video`,
                    name: `video`,
                    type: `video`,
                }
            ]
        },
    ]
}

这是video.js的SANITY架构：

export default {
    // Computer name
    name: `video`,
    // Visible title
    title: `Video`,
    type: `object`,
    fields: [
        { name: `title`, type: `string`, title: `Video title` },
        { name: `url`, type: `url`, title: `URL` },
        { name: `public`, title: `public`, type: `boolean`, initialValue: false }
    ]
}

此Gatsby页面查询：

{
  allSanityCourses {
    nodes {
      title
      price
      playlist {
        url
        title
        public
      }
    }
  }
}

结果：

{
  "data": {
    "allSanityCourses": {
      "nodes": [
        {
          "title": "Master VS Code",
          "price": 149,
          "playlist": [
            {
              "url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
              "title": "Introduction",
              "public": true
            },
            {
              "url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
              "title": "Philosophy",
              "public": false
            },
            {
              "url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
              "title": "Tech and Tools",
              "public": false
            },
            {
              "url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
              "title": "Integration",
              "public": true
            },
            {
              "url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
              "title": "Extensions",
              "public": false
            }
          ]
        }
      ]
    }
  },
  "extensions": {}
}

为了防止url字段被注入到运行此Gatsby页面查询的Reaction组件中(因为这些urls是付费的)，我需要删除它，如果public字段设置为false。

我已尝试将其插入gastby-node.js：

exports.createSchemaCustomization = ({ actions, schema }) => {
    const { createTypes } = actions
    const typeDefs = [
        schema.buildObjectType({
            name: "SanityCourses",
            fields: {
                playlist: {
                    type: "[SanityVideo]",
                    url: {
                        type: "String",
                        resolve: (source) => "nope"
                    },
                },
            },
            interfaces: ["Node"],
        }),
    ]
    createTypes(typeDefs)
}

和：

exports.createResolvers = ({ createResolvers }) => {
    const resolvers = {
        SanityCourses: {
            playlist: {
                type: "[SanityVideo]",
                url: {
                    type: "String",
                    resolve(source, args, context, info) {
                        return "nope"
                    },
                }
            },
        },
    }
    createResolvers(resolvers)
}

但这两种方法似乎都不管用。url字段一如既往地返回URL。解析器似乎甚至不能启动(我已经尝试在其中放入sole.log())。

如果公共字段设置为False或要进入的一般方向，有关如何删除URL字段的任何帮助将不胜感激。

推荐答案

放弃createSchemaCustomization中的尝试，因为您不需要在这里自定义架构(尽管我相信有一种方法可以使用它来实现您想要的，但不期望其中的数据来自现有节点，并且这种未声明的依赖项可能会造成缓存问题)。

然后将createResolvers函数更新为如下所示：

exports.createResolvers = ({ createResolvers }) => {
  createResolvers({
    SanityVideo: {
      safeUrl: {
        type: "String",
        resolve: (source, args, context, info) => source.public ? source.url : null
      },
    },
  })
}

1. 我不相信解析器可以替换源自架构的节点(字段)，因此使用safeUrl而不是url
2. 您要向其中添加字段的类型是SanityVideo，父节点是什么并不重要-这将应用于数据中SanityVideo的所有实例

这篇关于如何为Gatsby页面查询创建自定义解析器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！