[英]Query results into an AG-Grid
I want to display all the users and email into an ag-grid but nothing I do seems to Work.我想将所有用户和 email 显示到一个 ag-grid 中,但我似乎没有做任何事情。 I am using react JavaScript in order to build an admin portal.我正在使用 react JavaScript 来构建管理门户。
import React from 'react';
import './users.css'
import { useQuery, gql } from '@apollo/client';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
const USER_QUERY = gql`
{
users {
_id
username
email
}
}
`;
export default function Users() {
const { data, loading, error } = useQuery(USER_QUERY);
if (loading) return <p>loading...</p>;
if (error) return <p>ERROR</p>;
if (!data) return <p>Not found</p>;
const [columnDefs] =[
{ field: "username" },
{ field: "email" },
];
const [rowData] = data.users.map(user => {
return (
{
username: user.username,
email: user.email,
}
)
}
);
return (
<div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}>
</AgGridReact>
</div>
);
};
Any pointers on what I am doing wrong?关于我做错了什么的任何指示? or any fixes for this.或对此的任何修复。
Removing [ ] from从中删除 [ ]
const [columnDefs] =[
{ field: "username" },
{ field: "email" },
];
const ]rowData] = data.users.map(user => {
return (
{
username: user.username,
email: user.email,
}
)
}
);
to到
const columnDefs =[
{ field: "username" },
{ field: "email" },
];
const rowData = data.users.map(user => {
return (
{
username: user.username,
email: user.email,
}
)
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.