I am writing a little react app and I am trying to get data from a graphql server. I think (big emphisis on the word think) I am querying it correctly however it compiles but then gives me the following error message:
TypeError: Object(...) is not a function
It refers to line 16 which is where I define the Users function.
After a bit of googling a came across this: TypeError: Object(...) is not a function reactjs Whereby they seem to point to the person not importing/exporting there function correctly. However I do not believe I am doing that wrong. Any help or pointing in the right direction would be wonderful.
Thank you for reading and stay safe :)
code snippets:
Users file:
import React from "react";
import { useQuery } from "react-apollo";
import { gql } from "graphql-tag";
const QUERY_ALL_USERS = gql`
query getUsers {
users{
name
role
createdAt
}
}
`;
export const Users = () => {
const { loading, error, data } = useQuery(QUERY_ALL_USERS);
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
const users = data.users.map((u) => {
return (
<li>
{u.name} <strong>{u.role}</strong>
</li>
)
})
return (
<ul>
{ users }
</ul>
);
};
App.js:
import { Users } from "./Users";
.
.
.
class App extends Component {
render() {
return (
<div className="app">
<header>
.
.
.
</header>
<Users />
</div>
);
}
}
Try importing it like this
import gql from 'graphql-tag';
Basically remove {} wrap
I think you need to move the mapping through the user into the return statement. Or at if (data) before the return. Seems like the users prop data on is being read before the response has been received.
import React from "react";
import { useQuery } from "react-apollo";
import { gql } from "graphql-tag";
const QUERY_ALL_USERS = gql`
query getUsers {
users{
name
role
createdAt
}
}
`;
export const Users = () => {
const { loading, error, data } = useQuery(QUERY_ALL_USERS);
if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;
function User(){
let users
if(data && data?.user){
users = = data.users.map((u) => {
return (
<li>
{u.name} <strong>{u.role}</strong>
</li>
)
})
}
return users
}
return (
<ul>
{!loading && <User/> }
</ul>
);
};
see full code
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
It said Object is not a function, in react, you can't use an object as a component, it has to be a function. Instead of doing
<ul>{ users }</ul>, try to create a function User, return the map array through the function
Function User(){
let user
if(data && data?.users){
users = data.users.map((u) => {
return (
<li>
{u.name} <strong>{u.role}</strong>
</li>
)
})}
return user
}
then changed it to
<ul><User /></ul>
let me know if that works.