Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

95
Vistas
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 Respuestas
Responde la pregunta

0

Try importing it like this

import gql from 'graphql-tag';

Basically remove {} wrap

7 months ago · Juan Pablo Isaza Denunciar

0

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.

7 months ago · Juan Pablo Isaza Denunciar

0

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.

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos