小编kia*_*hws的帖子

使用 Apollo 的 writeFragment 更新嵌套列表

我正在开发一个应用程序,在该应用程序中可以使用方向舵和其他东西配置一艘船。数据库结构有点嵌套,到目前为止,我一直将 GraphQL 查询与数据库保持一致。

这意味着:我可以使用一些查询 ship(projectId, shipId) 获取一艘船,但我使用的是嵌套查询:

query {
    project(id:1) {
        id
        title
        ship(id:1) {
            id
            name
            rudders {
                id
                position
            }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

这样的结构当然会导致很多嵌套数组。例如,如果我刚刚添加了一个新方向舵,则必须使用 cache.readQuery 进行检索,它为我提供项目对象而不是方向舵列表。要将方向舵添加到缓存中,我会得到一条带有嵌套的、解构的对象的长行,这使得代码难以阅读。

所以我想到了使用 GraphQL 片段。在 Internet 上,我看到它们被大量使用以防止必须在大量对象上重新键入多个字段(我个人认为这也非常有用!)。然而,片段用于数组的例子并不多。

当将一些数据附加到嵌套在某些缓存查询中的数组时,数组的片段可以保存所有对象解构。使用 Apollo 的 readFragment 和 writeFragment,我设法让一些东西工作起来。

片段:

export const FRAGMENT_RUDDER_ARRAY = gql`
    fragment rudderArray on ShipObject {
        rudders {
            id
            position
        }
    }
`
Run Code Online (Sandbox Code Playgroud)

用于主船查询:

query {
    project(id: ...) {
        id
        title
        ship(id: ...) {
            id
            name
            ...rudderArray
        }
    }
}
${RUDDER_FRAGMENT_ARRAY}
Run Code Online (Sandbox Code Playgroud)

使用这个,我可以编写一个更清晰的 update() 函数来在突变后更新 Apollo 的缓存。见下文: …

javascript reactjs graphql react-apollo

8
推荐指数
0
解决办法
1424
查看次数

对本机FlatList进行排序

如何FlatList按字母顺序排序?

export default function PartnersList(props) {
  const { partners, onPartnerDetails } = props;

  return (
    <FlatList
      style={layout.list}
      contentContainerStyle={layout.listContainer}
      numColumns={2}
      data={partners}
      renderItem={({ item }) => (

        ...
Run Code Online (Sandbox Code Playgroud)

javascript sorting reactjs react-native

6
推荐指数
1
解决办法
6300
查看次数

纱线安装和构建消耗 100% CPU 和内存 95%

我正在从事基于 Electron、Angular 8、Nodejs 的项目。每当我使用以下命令时,我的系统都会消耗 100% 的 CPU 利用率和 95% 的内存,并且系统会冻结 5 到 7 分钟。正如我们的 UI 架构师所建议的,我使用纱线而不是 npm。

我使用以下命令。

yarn install && yarn build
Run Code Online (Sandbox Code Playgroud)

我使用的是带有 16 GB RAM 的 Windows 10。对于其他团队成员来说,这也是一个常见问题。根据package.json,纱线构建的命令是

"build": "rimraf dist && webpack --config config/webpack.dev.js",
Run Code Online (Sandbox Code Playgroud)

我在下面提供了代码webpack.dev.js

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

module.exports = webpackMerge(commonConfig, {
    mode: 'development',
    devtool: 'inline-source-map',
});
Run Code Online (Sandbox Code Playgroud)

目前,目录大小node_modules为 1.5 GB。我想知道这是否是 NodeJS 或基于纱线的项目的预期行为?我在 java 中有非常大的应用程序,但是当我使用 Maven 或 Gradle 构建时,我没有看到这种行为。请建议我是否可以改进。

我还浏览了以下 StackOverflow 链接,但无法得到正确的答案。 纱线安装消耗了 TeamCity 和 Jenkins 上的所有内存

node.js electron yarnpkg angular

5
推荐指数
1
解决办法
5973
查看次数

直接渲染组件警告

我已经有一段时间得到以下警告,而且我很不确定实际上是什么问题:

警告:render():不鼓励将组件直接呈现到document.body中,因为它的子项通常由第三方脚本和浏览器扩展操作.这可能会导致细微的和解问题.尝试渲染为为您的应用创建的容器元素.

有些人建议使用ReactDOM.render(),这正是我首先要做的,我使用facebook的Create React App来开发我的应用程序.

有线索吗?


编辑:我的index.js

ReactDOM.render(<App />, document.getElementById("root"));

javascript reactjs react-dom

1
推荐指数
2
解决办法
2760
查看次数

使用电子构建器为不同的操作系统构建原生模块

我正在使用electronand创建一个应用程序nodejs,当我尝试electron-builder使用以下命令构建它时:

electron-builder --mac --linux --win --x64
Run Code Online (Sandbox Code Playgroud)

它仅为我当前的操作系统构建本机模块。有没有办法为所有操作系统构建本机模块?

electron native-module electron-builder

1
推荐指数
1
解决办法
1061
查看次数