使用来自API.graphql调用的数据映射ReactJS列表

npm install graphql react-apollo apollo-boost

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql', // 替换为你的GraphQL API地址
});

import { gql } from 'apollo-boost';

const GET_DATA = gql`
  query {
    // 在这里编写你的查询语句
  }
`;

import { useQuery } from 'react-apollo';

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  // 在这里使用data来渲染React列表
  return (
    <ul>
      {data.items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};