使用 GraphQL 和 ReactJS 未定义导入的 <Query> 组件

Posted 2023-03-10

【中文标题】使用 GraphQL 和 ReactJS 未定义导入的 <Query> 组件

【英文标题】：imported <Query> component is undefined with GraphQL and ReactJS

【发布时间】：2019-02-11 05:00:59

【问题描述】：

我正在尝试在 ReactJS 中呈现我的 HOC 函数，但它给了我一个错误。这里有一些sn-ps（为了空间和清晰度，我已经删掉了不相关的东西）：

在我的 app.js 组件中，我正在导入我的 HOC：

import React,  Component  from "react";
import "./App.css";
import  Route, Switch, BrowserRouter as Router  from "react-router-dom";
import Home from "../Home/Home";
import StoriesHOC from "../Story/GetAllStories/Stories";

export default class App extends Component 
 render() 
   return (
  <Router>
    <div>
      <Navigation />
      <Switch>
        <Route exact path="/" component=Home />
        <Route
          path="/all_stories"
          render=() => 
            return <StoriesHOC />;
          
        />
         </Switch>
       </div>
    </Router>
   );
 

然后进入<StoriesHOC />：

import React from "react";
import StoryShow from "../StoryShow/StoryShow";
import  Query, Fetching, Error  from "react-apollo";
import  getStories  from "../../Queries/Queries";

function Stories( stories, getStoriesQuery ) 
  return (
    <div>
      <div className="stories_header">
       <h2>All Stories</h2>
      </div>
     <div className="stories-container">
       stories.map(story => (
         <StoryShow
          key=story.id
          story=story
          getStoriesQuery=getStoriesQuery
      />
      ))
     </div>
    </div>
   );
  

 export default function StoriesHOC(props) 
   return (

   <Query query=getStories>
  ( loading, error, data ) => 
      console.log(data)
  if (error) return <Error />
  if (loading || !data) return <Fetching />

  return <Stories 
          ...props 
          getStoriesQuery=getStories 
          stories=(data && data.stories) || []/> 
  </Query>
 );

编辑：这是 StoryShow 组件，因为它也被导出为默认功能。

  import React from "react";
  import  Link  from 'react-router-dom'

  export default function StoryShow(
   story: id, title, author, tagline, summary = 
   ) 
  return (
    <div>
      <h1>title</h1>
      <h2>tagline</h2>
      <h3>author</h3>
      <p>summary</p>
      <Link exact to='/story/' + id>Read More</Link>
   </div>
  )
 

实际的 GraphQL 查询 import getStories from "../../Queries/Queries"; 正在另一个文件中执行，格式如下：

 import gql from "graphql-tag";

 export const getStories = gql`
   query getStories 
      stories 
        id
        title
        author
        tagline
      
     
   `;

然而，chrome浏览器中实际显示的错误是：

 Element type is invalid: expected a string (for built-in components) 
 or a class/function (for composite components) but got: undefined. You 
 likely forgot to export your component from the file it's defined in, 
 or you might have mixed up default and named imports.

 Check the render method of `StoriesHOC`.

它稍后会给出停止位置的行，即前面在 StoriesHOC 函数中看到的 <Query query=getStories>。 话虽如此，我的问题似乎仅源于这条线，但是虽然我一直在努力解决这个问题，但我最好的猜测是我正在做某事我的 GraphQL 查询出错了，但是当我在后端检查 IDE 时，它可以完美呈现。

还有一个问题是试图弄清楚我是否在我的 app.js 文件中正确导出了导入的函数，但我知道因为我使用 export default function myFunc 导出了它应该按当前状态导入。

我们将不胜感激任何帮助，以及建议或批评。提前谢谢！

【问题讨论】：

错误似乎与 JSX 标签相关 - StoryShow 已导出？

@xadm 据我所知，是的，我编辑了帖子以显示我正在导出它。

从StoriesHOC 中的<Query/> 中删除所有'body' - 渲染一些html，简单的<div/> to check if it's related to child components or query. Queries can be directly imported from *.graphql` 文件。

我按照你说的做了，StoriesHOC组件渲染没问题。我相信我的错误出现在 的 Query 组件中，因为当我在浏览器中收到错误时，调试器会将我重定向到该行

【参考方案1】：

If 带有剥离代码/内容的组件

export default function StoriesHOC(props) 
  return (
    <Query query=getStories>
      ( data ) => 
        console.log(data)
        return <div>fake content</div>
      
    </Query>
  )

正确呈现，然后查询正常，问题出在已删除的部分。将它们一一恢复以​​查找/隔离真正问题的根源。

【讨论】：

对不起，也许我没有说清楚。我知道错误的根源是<Query>组件中实际的query=getStories行，所以我知道问题出在哪里，但我不知道我做错了什么。

尝试在同一个文件中直接定义getStories，无需导入。此错误通常与虚拟树/节点/元素有关 - 而不是参数/道具。

我已经按照您的建议进行了操作，但错误仍然存​​在，此时我还没有什么想法。有什么建议吗？如果你愿意，我可以链接我的 Github 代码

试试getStories w/o query getStories

问题已解决。感谢您的帮助！

【参考方案2】：

我发现了我的问题，这是为 react-apollo, graphql-tag, and apollo-boost. 安装的过时 npm 听起来很明显，这应该是我首先查看的地方，但实际上我两周前刚刚更新了它们！

对于路过的人，这里是对我有用的软件包版本的 sn-p：

"dependencies": 
  "apollo-boost": "^0.1.15",
  "cors": "^2.8.4",
  "express": "^4.16.3",
  "graphql": "^0.13.2",
  "graphql-server-express": "^1.4.0",
  "graphql-tag": "^2.9.2",
  "react": "^16.5.0",
  "react-apollo": "^2.1.11",
  "react-dom": "^16.4.2",
  "react-router-dom": "^4.3.1",
  "react-scripts": "1.1.4"