中继现代嵌套分页

2023-12-25

我有一个根查询songs,这是在分页容器中。 然后我在歌曲上有一个嵌套属性,称为comments我也想分页,因为我不想一次为每首歌加载 10k 条评论。

歌曲容器.js:

fragment songsContainer on Query {
    songs(
      first: $count
      after: $cursor
      genre: $genre
      filter: $filter
    ) @connection(key: "songsContainer_songs") {
      edges {
        node {
          audioId
          name
          coverImageUrl
          artist
          likes
          dislikes
          ...commentsContainer
        }
      }
    }
  }

const connectionConfig = {
  direction: 'forward',
  query: graphql`
    query songsContainerForwardQuery(
      $count: Int!
      $cursor: String
      $genre: String
      $filter: FilterInput
    ) {
      ...songsContainer
    }
  `,
  getVariables: (_, { count, cursor }) => ({
    count,
    cursor,
  }),
};

paginationContainer(fragments, connectionConfig);

评论容器.js

  fragment commentsContainer on Audio {
    comments(
      first: $count
      after: $cursor
      getReplies: $getReplies
    ) @connection(key: "commentsContainer_comments") {
      edges {
        node {
          commentId
          body
          date
          likes
          dislikes
          repliesCount
          originalComment {
            id
          }
          user {
            userName
          }
        }
      }
    }
  }

如何编写注释的connectionConfig?我试过这个:

const connectionConfig = {
  direction: 'forward',
  query: graphql`
    query commentsContainerForwardQuery(
      $count: Int!
      $cursor: String
    ) {
      ...commentsContainer
    }
  `,
  getVariables: (_, { count, cursor }) => ({
    count,
    cursor,
  }),
};

但因为评论嵌套在歌曲上,所以它会抛出一个错误,指出根上不存在查询。


SongsContainer.js

createPaginationContainer(
  SongsContainer,
  {
    viewer: graphql`
      fragment SongsContainer_viewer on Query {
        id
        songs(first: $count, after: $cursor)
          @connection(key: "SongsContainer_songs", filters: []) {
          edges {
            cursor
            node {
              id
              ...SongItem_song
            }
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return props.viewer && props.viewer.songs;
    },
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount
      };
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor
      };
    },
    query: graphql`
      query SongsContainerQuery($count: Int!, $cursor: String) {
        viewer {
          ...SongsContainer_viewer
        }
      }
    `
  }
);

SongItem.js

createRefetchContainer(
  SongItem,
  {
    song: graphql`
      fragment SongItem_song on Audio
        @argumentDefinitions(
          count: { type: "Int", defaultValue: 20 }
          cursor: { type: "String", defaultValue: null }
        ) {
        id
        ...CommentsContainer_song
        # ...more pagination container other_song
      }
    `
  },
  graphql`
    query SongItemQuery($id: ID!, $count: Int!, $cursor: String) {
      song(id: $id) {
        ...SongItem_song @arguments(count: $count, cursor: $cursor)
      }
    }
  `
);

CommentsContainer.js

createPaginationContainer(
  CommentsContainer,
  {
    song: graphql`
      fragment CommentsContainer_song on Audio {
        id
        comments(first: $count, after: $cursor)
          @connection(key: "CommentsContainer_comments", filters: []) {
          edges {
            id
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return props.song && props.song.comments;
    },
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount
      };
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor,
        id: props.song.id
      };
    },
    query: graphql`
      query CommentsContainerQuery($id: ID!, $count: Int!, $cursor: String) {
        song(id: $id) {
          ...CommentsContainer_song
        }
      }
    `
  }
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

中继现代嵌套分页 的相关文章

  • Javascript:将 JSON 字符串转换为 ES6 映射或其他形式以保留键的顺序

    ES6 或后续版本 Javascript 或 TypeScript 中是否有原生 内置 方法将 JSON 字符串转换为 ES6 映射 或者可以选择要实现的自制解析器 目标是保留 JSON 字符串编码对象的键顺序 Note 我故意不使用 解析
  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • 从平面数组创建嵌套对象

    我目前有一个对象数组 我正在尝试将其重塑为嵌套对象ID作为对象键 并将其作为目标ID与parentid 如果不是 0 我尝试了几种方法 但我很挣扎 主要绊脚石for me是超过一两层深度的任何东西 理想情况下 我需要它是动态的 这样它就可以
  • “过滤”JSON 以获得唯一键并获取所有相关值

    找到一个组中所有可能的相关值的最佳方法是什么 var table group a stuff new group a stuff old group b stuff newOld group b stuff old group c stuf
  • Angular 2 测试 ng-content

    我想知道是否有办法测试ng content不创建宿主元素 例如 如果我有警报组件 Component selector app alert template div div
  • 如何抑制 IE9 window.close() 确认消息

    应用 window close 函数后 IE9 会引发 您正在查看的网页正在尝试关闭 消息 有没有办法在不更改应用程序代码的情况下 而是通过更改一些特定于 IE 的注册表项来抑制此消息 如果窗口不是由脚本打开的 IE 不允许在没有确认的情况
  • 我无法在我的反应本机上使用加载的应用程序。它不会正常工作

    我不断收到此错误 错误截图 https i stack imgur com 88KPa png 这是我用来导入自定义谷歌字体的代码 import React useState from react import Home from scre
  • 更改模板标签 <# {% {{ 等后,John Resig 的微模板出现语法错误

    我在使用 John Resig 的 Micro 模板时遇到了一些麻烦 谁能帮我解释为什么它不起作用 这是模板 以及发动机的改装部分 str replace r t n g split join t replace gt t g 1 r re
  • 正则表达式没有按预期工作?

    我有这个正则表达式 new RegExp a z 0 9 ig 我正在测试一个不应该工作的字符串 vc 但它确实通过了测试 而且它不应该 new RegExp a z 0 9 ig test vc true 但如果我删除其中一个 or or
  • webpack 加载器并包含

    我是 webpack 的新手 我正在尝试了解加载器及其属性 例如测试 加载器 包含等 这是我在 google 中找到的 webpack config js 的示例片段 module loaders test js loader babel
  • 如何在Android上获取角度中的按键事件?

    我们如何在 Android 上的 Angular 中获取按键事件及其值 我使用phonegap Cordova Angular JS
  • Javascript 3d 绘图实用程序? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 有谁知道有什么好的 javascript 3d 绘图实用程序吗 我知道每个网站都推荐过画布 3d 图
  • 无法使用 jQuery 添加两个小数

    我试图将两个小数值相加 但返回的总和是纯整数 怎么了 我找不到它 欢迎任何帮助 jQuery delivery method ship select change function var cost jQuery this val jQue
  • Firestore——仅获取大型同步集合中已更改的文档

    我已阅读下面的所有问题 但在文档中找不到任何内容来描述如何同步集合和接收only更改集合中的文档 我的同步集合中有超过 500 个文档 使用redux saga firebase 同步集合 https redux saga firebase
  • 为什么发送 fetch() 时我的响应数据未定义?

    我正在尝试在客户端使用 fetch 将数据发布到我的 NodeJS 服务器或从我的 NodeJS 服务器发布数据 服务器很好地收到了 post 请求 我能够记录 req 变量 但是当我 res send any data 时 客户端无法检测
  • 使用XMLHttpRequest自动网页刷新内存泄漏

    问候 我一直在为一些使用 8 位微控制器的硬件开发网络界面 该网页使用 HTML javascript JSON 和 XHR XMLHttpRequest 进行通信 我想做的是创建一个页面 使用 setInterval 使用控制器中的新值每
  • AngularJS 中的嵌套模块

    我有 2 个不同的 AngularJs 模块 一个 widgetContainer 和一个 widget 小部件可以显示为独立的应用程序 也可以包含在小部件容器中 一个 widgetContainer 包含 0 N 个 widget 如果我
  • “x modulo y”的结果是什么?

    引用 ECMAScript 规范第 5 2 节 符号 x modulo y y 必须是有限且非零 计算 值 k 与 y 具有相同的符号 或零 使得 abs k 因此 如果 y 为正 则 x modulo y 的结果 k 为正 无论 x 的符
  • KML 中的 JavaScript 被 Google 地球插件忽略

    我创建了一个简单的 KML 文件 该文件可以在独立的 Google 地球客户端中运行 但在 Google 地球插件中根本无法运行 无论浏览器如何
  • 如何始终将焦点保持在画布上?

    我一直在这个论坛寻找解决方案 但尚未找到 无论我在页面上的哪个位置单击 我都需要始终将焦点放在画布元素上 我有几个按钮 在每个 onclick 事件中我写 document getElementById canvas focus 这确实有效

随机推荐

  • Google Apps 脚本中的 Utilities.unzip(blob) 的 blob 大小是否有限制?

    我有一个谷歌脚本 它访问一个网站 找到一个 zip 文件 解压缩它 并从相关文件中提取相关数据 我想做同样的事情 但对于同一站点上不同的 更大的 zip 文件 我已经访问了 zip 使用几乎相同的代码 但它抛出一个错误 无法解压缩 My c
  • 使用转换器的数据触发不起作用

    我正在尝试根据文本块的值更新其颜色 看似简单却行不通 这是文本块 xaml
  • 如何将函数调用添加到列表中?

    我有一个使用以下函数的 Python 代码 def func1 arguments a b c def func2 arguments d e f def func3 arguments g h i 上述每个功能都会在产品上配置 CLI 命
  • 将行转换为列 Shell 脚本

    我有以下格式的数据 APP OWNER hari APP AREA Work Business Area AUS APP ID 124080 我希望将数据转换为以下格式 APP OWNER APP AREA APP ID hari Work
  • Firebase DatabaseException:无法将 java.lang.Long 类型的值转换为 String

    com google firebase database DatabaseException 转换失败 java lang Long 类型的值转换为 String 是我在按照文档尝试将数据检索到对象以供使用时不断收到的错误 这是我的对象模型
  • 没有匹配的函数用于调用构造函数(c ++)[重复]

    这个问题在这里已经有答案了 EDIT 好吧 我又花了几个小时阅读了一些内容 我想我终于更好地理解了 C OOP 至少是基础知识 我决定一次重写整个程序和代码并进行更多测试 我想这次我缩小了错误的范围 命名风暴 h include
  • Plotly:躲避散点图分类轴上的重叠点

    我正在尝试使用绘图来比较回归模型的系数 并使用置信区间的误差线 我使用以下代码来绘制它 使用变量作为分类y散点图中的轴 问题是这些点是重叠的 我想避开它们 就像您设置时在条形图中发生的那样barmode group 如果我有一个数字轴 我可
  • Rails - 有 2 个字段的查找依据?

    我在控制器中有以下内容 def update permission Permission find by user id params user id 但我希望它也能通过另一个参数找到 project id 我怎样才能在 Rails 中做这
  • 如何让我的维吉尼亚密码忽略原始消息中的空格

    我试图制作一个维吉尼亚密码 但我似乎找不到一种方法来实现在输入消息时忽略输入的空格 然后打印最后的功能 例如 我输入起始消息 python 计算 然后我输入密钥为 stack 如果程序忽略原始消息中的空格 我希望得到 isukzg wppa
  • 对象文字属性值简写与“this”不兼容

    在 JavaScript 中可以执行以下操作 var a this this 但使用 ES6 属性简写时 我得到 SyntaxError var b this SyntaxError this is a reserved identifie
  • 关于 MvcContrib TestHelpers 的新手问题

    我刚刚开始使用 MvcContrib 中的 TestHelpers 我想尝试在我的控制器上测试一个操作方法 该方法本身测试 IsAjaxRequest 是否为 true 我使用了 TestHelper 示例中显示的相同代码来设置 TestC
  • snprintf:是否有任何 C 标准提案/计划来更改此函数的描述?

    C语言标准是否有任何提案 或计划 来更改 最后一句 描述snprintf函数使得描述的歧义这是我的答案 https stackoverflow com questions 7706936 is snprintf always null te
  • Google Play 游戏服务错误代码 400

    有一个使用玩游戏服务的应用程序 但由于某种原因它停止工作 看起来有时我可以成功登录 但通常 不能 如果我检查 API 流量 大约有 10 的人得到响应代码 200 其他人得到响应代码 404 得到404的方法 游戏 应用程序 玩过 游戏 事
  • React Native AsyncStorage 返回承诺而不是值

    我知道这是 RN 中一个非常常见的问题 我仍在尝试了解从属性文件加载数据时返回 Promise 的可能优势 而不是仅仅返回值 这使得链接请求非常麻烦 但无论如何 这是我现在拥有的 它是 AsyncStorage RN 实现的包装器 mult
  • Android 应用程序显示状态已发布但无法安装,表示预注册而不是安装

    从文档中可以看出 如果应用程序状态已发布 则应该可以下载 但对我来说 我没有安装选项 而是预先注册 我应该等多久才能显示安装 谢谢 The 预注册帮助页面位于此处 https support google com googleplay an
  • 如何去掉 ASP.NET MVC 路由中的问号?

    我定义了以下路线 theme subtheme contenttype contentdetail Print 当我使用 Url Action PrintLayout Page new contentUrlTitle Model Conte
  • 如何修复 UTF-8 解码错误的字符串?

    我正在使用来自 RESTful API 的数据 它返回字符串和整数值 但是 它似乎返回了一些错误编码 解码的字符串值 可能 预期字符串 crian a 收到的字符串 crian a 这是我的代码 url https analytics us
  • python循环并为列的每个值创建新的数据框

    我想为车站的每个唯一值创建一个新的数据框 我尝试了下面的方法 只给出了 dataframe tai new i 中更新的最后一个站数据 tai station unique has 500 values for i in tai stati
  • 角度2更改位置以固定在滚动上

    我有一个位置固定的左侧边栏 我想要实现的是 当我滚动大约 50 或 60 像素时 左侧边栏的位置应更改为固定 左侧栏 component ts import Component from angular core Component mod
  • 中继现代嵌套分页

    我有一个根查询songs 这是在分页容器中 然后我在歌曲上有一个嵌套属性 称为comments我也想分页 因为我不想一次为每首歌加载 10k 条评论 歌曲容器 js fragment songsContainer on Query song