从GraphQL查询后，如何将数据存储在React状态？

import React, { useState, useEffect } from 'react';
import { useQuery } from '@apollo/client';
import { GET_DATA } from './graphqlQueries';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const { loading, error, data: queryData } = useQuery(GET_DATA);

  useEffect(() => {
    if (queryData) {
      setData(queryData);
    }
  }, [queryData]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data && (
        <ul>
          {data.items.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default MyComponent;