I am trying to render my HOC function in ReactJS, but it is giving me an error. Here are a few snippets (I have cut out the unrelated stuff for space and clarity):
In my app.js component I am importing my HOC as such:
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>
);
}
}
Then going into the <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>
);
}
EDIT: Here is the StoryShow Component as it too is being exported as a default function.
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>
)
}
The actual GraphQL query, import { getStories } from "../../Queries/Queries"; is being carried out in another file and is formatted as such:
import gql from "graphql-tag";
export const getStories = gql`
query getStories {
stories {
id
title
author
tagline
}
}
`;
However, the actual error displayed in the chrome browser is:
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`.
It later gives the line at where it stops which is <Query query={getStories}> seen earlier in the StoriesHOC function. That being said, it would seem my issue is stemming from this line alone, but while I've been all of the board with trying to solve the issue, my best guess is only that I am doing something wrong in my GraphQL query, however when I check the IDE in the backend, it renders perfectly.
There is also the issue of trying to figure out if I exported the imported the function properly in my app.js file, but I know that because I exported using the export default function myFunc that it should be imported as currently state.
Any help would be greatly appreciated, as well as advice or critques. Thank you in advance!
