如何使用GraphQL與React應用集成

要在React應用中集成GraphQL，可以使用以下步驟：

1. 安裝必要的依賴項： 首先，安裝以下依賴項：

npm install graphql @apollo/client

2. 配置Apollo Client： 在React應用中配置Apollo Client以便使用GraphQL。可以在項目的根目錄創建一個新文件src/apollo.js，并在其中配置Apollo Client：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint',
  cache: new InMemoryCache()
});

export default client;

3. 使用Apollo Provider包裝React應用： 在項目的根組件中，使用Apollo Provider將Apollo Client包裝在應用中：

import { ApolloProvider } from '@apollo/client';
import client from './apollo';

function App() {
  return (
    <ApolloProvider client={client}>
      {/* Your app components */}
    </ApolloProvider>
  );
}

4. 查詢數據： 現在，您可以在React組件中使用GraphQL查詢數據。例如，可以使用useQuery鉤子從GraphQL服務器獲取數據：

import { useQuery, gql } from '@apollo/client';

const GET_DATA = gql`
  query {
    data {
      id
      name
    }
  }
`;

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

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

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

5. 發送變更： 如果您的應用需要向GraphQL服務器發送變更，可以使用useMutation鉤子：

import { useMutation, gql } from '@apollo/client';

const ADD_DATA = gql`
  mutation {
    addData(input: { name: "New Data" }) {
      id
      name
    }
  }
`;

function MyComponent() {
  const [addData] = useMutation(ADD_DATA);

  const handleAddData = () => {
    addData();
  };

  return (
    <button onClick={handleAddData}>Add Data</button>
  );
}

通過以上步驟，您可以在React應用中集成GraphQL并與服務器進行數據交互。