Question

0

100

Views

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

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>
    );
  }
}

7 months ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T11:10:27.450Z

Try importing it like this

import gql from 'graphql-tag';

Basically remove {} wrap

Answer 2 · 2022-07-05T11:10:27.458Z

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.

Answer 3 · 2022-07-05T11:10:27.465Z

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.