如何使用Apollo的useQuery和useMutation Hooks在React中執(zhí)行GraphQL操作

發(fā)布時間：2024-05-11 11:53:10 來源：億速云閱讀：82 作者：小樊欄目：軟件技術(shù)

要使用Apollo的useQuery和useMutation Hooks在React中執(zhí)行GraphQL操作，首先需要安裝 @apollo/client 包。然后，您可以按照以下步驟進(jìn)行操作：

導(dǎo)入所需的依賴項(xiàng)：

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

創(chuàng)建GraphQL查詢和變異：

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

const GET_DATA = gql`
  query GetData {
    // GraphQL查詢語句
  }
`;

const ADD_DATA = gql`
  mutation AddData($input: InputType!) {
    // GraphQL變異語句
  }
`;

使用 useQuery Hook 發(fā)起GraphQL查詢：

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

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

// 處理獲取到的數(shù)據(jù)

使用 useMutation Hook 發(fā)起GraphQL變異：

const [addData] = useMutation(ADD_DATA);

const handleAddData = () => {
  addData({
    variables: {
      input: {/* 輸入數(shù)據(jù) */}
    }
  });
};

// 渲染一個按鈕，點(diǎn)擊時觸發(fā) handleAddData 函數(shù)

通過以上步驟，您可以在React應(yīng)用程序中使用Apollo的useQuery和useMutation Hooks來執(zhí)行GraphQL操作。

向AI問一下細(xì)節(jié)

如何使用Apollo的useQuery和useMutation Hooks在React中執(zhí)行GraphQL操作

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽