Estoy escribiendo una pequeña aplicación de reacción y estoy tratando de obtener datos de un servidor graphql. Creo (gran énfasis en la palabra pensar) que lo estoy consultando correctamente, sin embargo, se compila pero luego me da el siguiente mensaje de error:
TypeError: Object(...) no es una función
Se refiere a la línea 16 que es donde defino la función Usuarios.
Después de buscar un poco en Google, me encontré con esto: TypeError: Object(...) no es una función reactjs Por lo que parecen señalar a la persona que no está importando/exportando allí la función correctamente. Sin embargo, no creo que lo esté haciendo mal. Cualquier ayuda o indicación en la dirección correcta sería maravillosa.
Gracias por leer y mantente a salvo :)
fragmentos de código:
Archivo de usuarios:
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> ); };Aplicación.js:
import { Users } from "./Users"; . . . class App extends Component { render() { return ( <div className="app"> <header> . . . </header> <Users /> </div> ); } }Intenta importarlo así
importar gql desde 'graphql-tag';
Básicamente eliminar {} envoltura
Creo que necesita mover la asignación a través del usuario a la declaración de devolución. O en if (data) antes de la devolución. Parece que los datos de los usuarios se leen antes de recibir la respuesta.
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> ); };ver código completo
<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> Dijo que Object no es una función, en reaccionar, no puede usar un objeto como componente, tiene que ser una función. En lugar de hacer <ul>{ users }</ul> , intente crear una función Usuario, devuelva la matriz de mapas a través de la función
Function User(){ let user if(data && data?.users){ users = data.users.map((u) => { return ( <li> {u.name} <strong>{u.role}</strong> </li> ) })} return user }luego lo cambié a
<ul><User /></ul>déjame saber si eso funciona.