无法创建中继容器; graphql.js 文件似乎有 webpack 工件?

Posted

技术标签:

【中文标题】无法创建中继容器; graphql.js 文件似乎有 webpack 工件?【英文标题】:Could not create Relay Container; graphql.js file appears to have webpack artifacts? 【发布时间】:2019-09-21 12:36:34 【问题描述】:

我在 Electron 容器中使用 Relay 和 CRA,我遇到了一个我似乎无法诊断的非常奇怪的错误:似乎导入的 GraphQL 片段包含 Webpack 工件?

Could not create Relay Container for `UsersGrid`. Expected a set of GraphQL fragments, got `function () 
  const node = __webpack_require__(/*! ./__generated__/UsersGrid_viewer.graphql */ "./src/components/users-grid/__generated__/UsersGrid_viewer.graphql.js");

Webpack 是否以某种方式编译 .graphql.js 文件?或者还有什么我应该看的?

这是中继容器:

import  createFragmentContainer, graphql  from 'react-relay';
import UsersGrid from './UsersGrid';

export default createFragmentContainer(
  UsersGrid,
  graphql`
    fragment UsersGrid_viewer on Query 
      user(login: "jvcjunior") 
        followers(first: 10) 
          edges 
            node 
              name
              avatarUrl
            
          
        
      
    
  `
);

内联编译成:

/***/ "./src/components/users-grid/UsersGrid.relay.js":
/*!******************************************************!*\
  !*** ./src/components/users-grid/UsersGrid.relay.js ***!
  \******************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) 

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react_relay__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-relay */ "./node_modules/react-relay/index.js");
/* harmony import */ var react_relay__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_relay__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _UsersGrid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./UsersGrid */ "./src/components/users-grid/UsersGrid.js");


/* harmony default export */ __webpack_exports__["default"] = (Object(react_relay__WEBPACK_IMPORTED_MODULE_0__["createFragmentContainer"])(_UsersGrid__WEBPACK_IMPORTED_MODULE_1__["default"], function () 
  const node = __webpack_require__(/*! ./__generated__/UsersGrid_viewer.graphql */ "./src/components/users-grid/__generated__/UsersGrid_viewer.graphql.js");

  if (node.hash && node.hash !== "d730274a63d8021d6427a27e7c3e2c27") 
    console.error("The definition of 'UsersGrid_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data.");
  

  return __webpack_require__(/*! ./__generated__/UsersGrid_viewer.graphql */ "./src/components/users-grid/__generated__/UsersGrid_viewer.graphql.js");
));

/***/ ),

【问题讨论】:

嗨。我在 react-native 与 relay@4 有同样的问题 @Alexes 你们有没有解决这个问题? 【参考方案1】:

尝试使用

createFragmentContainer(Component, 
  viewer: graphql`
    fragment UsersGrid_viewer on Query  ... 
  `
)

改为

createFragmentContainer(Component,
  graphql`
    fragment UsersGrid_viewer on Query  ... 
  `
)

【讨论】:

中继想要typeof fragmentSpec === 'object'github.com/facebook/relay/blob/… 这有帮助,但我不明白,为什么在文档中 the method 需要映射 [string]: GraphQLTaggedNode ,但在教程中他们只是传递 graphql` fragment … ` 字符串。可能是因为 babel-plugin-relay 必须将一个转换为另一个? 我刚刚从 ^3.0.0 升级到 ^4.0.0 并且不得不更改我的容器以传递对象而不是 graphqlfragment ... Fragment Container、Refetch Container、Pagination Container 现在总是期望一个对象作为片段声明(单个 graphql 标签不再是有效的输入),因为在我们的 babel 转换过程中,graphql 标签不再隐式生成对象包装器 @Alexes 谢谢。我在一个月前做了一个 PR 以保持教程的最新状态。

以上是关于无法创建中继容器; graphql.js 文件似乎有 webpack 工件?的主要内容,如果未能解决你的问题,请参考以下文章

GraphQL + 中继连接优化

Graphql + Relay graphql-relay-js 依赖

没有数据的中继容器

GraphQL JS 使用 .graphql 文件从节点 js 进行查询

中继编译器无法在 Typescript 中提取和使用 graphql 查询

Xcode 7.3,共享扩展,似乎无法将数据从扩展传递到容器应用程序