TypeError: Object(...) is not a function but I cannot work out why not

user_7150677 0
Viewed 1324

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>
    );
  }
}
react-apollo graphql reactjs javascript
3 Answers

Try importing it like this

import gql from 'graphql-tag';

Basically remove {} wrap

user_149994570

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.

user_148374580 
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.

user_176214030
Related