импортированный <Query>компонент не определен с GraphQL и ReactJS - PullRequest
Новая
       7

импортированный <Query>компонент не определен с GraphQL и ReactJS

0 голосов
/ 06 сентября 2018

Я пытаюсь отобразить свою функцию HOC в ReactJS, но она выдает ошибку. Вот несколько фрагментов (я вырезал несвязанный материал для простоты и ясности):

В моем 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`.

Позже он дает строку, в которой останавливается, что <Query query={getStories}> видно ранее в функции StoriesHOC. При этом кажется, что моя проблема проистекает из одной только этой строки, но, хотя я и был всеми силами, пытавшимися решить проблему, мое лучшее предположение - только то, что я делаю что-то не так в моем запросе GraphQL, однако, когда я проверяю IDE в бэкэнде, он прекрасно отрисовывается.

Существует также проблема выяснения, правильно ли я экспортировал импортированную функцию в мой файл app.js, но я знаю, что, поскольку я экспортировал с использованием export default function myFunc, она должна быть импортирована в текущем состоянии.

Буду признателен за любую помощь, а также за советы или критические замечания. Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Я нашел свою проблему, это были устаревшие установки npm для react-apollo, graphql-tag, and apollo-boost. Звучит довольно очевидно, что это должно было быть первое место, которое я посмотрел, но я буквально только что обновил их две недели назад!

Для проходящих мимо людей приведен фрагмент версии пакета, которая работает для меня: 

"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"
 }
0 голосов
/ 06 сентября 2018

Если компонент с разделенным кодом / содержимым 

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

отображается правильно, тогда запрос в порядке и проблемы в удаленных частях . Восстановите их один за другим, чтобы найти / изолировать настоящий источник проблем.

...