レスポンスクエリとは?

反応器で非同期通信を容易にするライブラリ.
返信クエリを使用する前に、主にreduxのミドルウェアを使用してapi非同期通信を行います.
reduceはグローバルステータス管理ツールであるにもかかわらず、ミドルウェア通信においても強力な性能を示し、かえってreduceをより使いにくくし、グローバルステータス管理を必要としない場合にもreduceに依存する現象が多く発生している.
今回フィードバッククエリを導入したのは,reduceからミドルウェアを分離するためではなく,reduceがデータポーリングに適していないと考えているためである.
しかし使用後,Ridexのみを使用する場合に比べてapi通信の処理が非常に簡素化され,直感的な変更が行われ,ブログで使用してから書くことにした.

API通信差異

¥¥¥¥¥¥

従来、reduckツールパッケージを使用してグローバルステータス管理を行う必要がない場合でも、sliceの作成、createAsyncThunkを使用してミドルウェアの設定、ExtraReducerの作成、storeへの保存、dispatch関数およびuserSelector関数を使用してstateに保存してインポートする必要があります.これは非常に複雑なプロセスです.

⚛▼▼▼検索するAPI通信

レスポンスクエリでは、これらのすべてのプロシージャを必要とせずにデータをロードできます.
useQuery()hookのみを使用すると、ロード、成功、エラー処理など、数え切れない機能を使用できます.

import { useQuery } from "react-query";

const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

基本骨格はこうです.
クエリーのキーをquerykeyに書き込んで設定したり、queryfnからaxios、fetch apiなどに通信要求を送信したりすることができます.optionsでは、ページから戻ってきたときにページを再キャプチャしたり、ポーリング用のrefect intervalを使用したりする機能があります.

簡潔なレスポンスクエリの使用

1.useQueryをcustom hookに分割する

クエリーに応答してgetリクエストを送信するためにはuseQueryを使用するのが便利だと知っていますが、getリクエストが必要なファイルでuseQueryを使用すると、データを受信して送信する部分がファイルの可読性を低下させるのではないでしょうか.
私が書いたコードを見ると、コンポーネント単位のきれいな外観にクエリーコードが含まれていて、散らかっているように見えます.
だからuseQueryをhookに分離して、1行入力すればいいのですが、もっときれいになるのではないでしょうか.
まずsrcフォルダにhooksというフォルダを作成し、管理しました.
これは思考ガイド情報をインポートするコードの一部である.

import { URL } from '../API';
import { useQuery } from 'react-query';

const fetchNodeList = async nodeTableId => {
  if (!nodeTableId) return;
  const { data } = await URL.get(`/node/all/${nodeTableId}`);
  return data;
};

export const useNode = nodeTableId => {
  return useQuery(['node', nodeTableId], () => fetchNodeList(nodeTableId), {
    enabled: !!nodeTableId,
    refetchInterval: 2000,
  });
};

「userNodeというCustom Hookを作りました.」nodeという名前のクエリーキーを設定し、fetchNodeListという名前のクエリー関数でgetリクエストを受信します.リクエスト送信時に必要なパラメータを作成し、userNodeを使用したファイルにパラメータ値を入力することで実行できます.

import { useNode } from '../../hooks/useNode';

const { status, data: nodeList, error, isFetching } = useNode(nodeTableId);

結果は上のコードでのみuseQueryを実行できます.

2.コールバックによるデータ管理

GETで取得したデータをコールバックとして取得し,クエリのstatus値に応じて必要な情報を表示することができる.
また、再描画時には対応する画面のみが交互に表示されるので、反応する仮想DOMをより賢明に利用することができる.

const renderByStatus = useCallback(() => {
    switch (status) {
      case 'loading':
        return <div>loading</div>;
      case 'error':
        if (error instanceof Error) {
          return <span>Error: {error.message}</span>;
        }
        break;
      default:
        return (
          <>
            {nodeList?.map(data => (
              <Square
                key={data.nodeId}
                width={data.width}
                height={data.height}
                radius={data.radius}
                color={data.color}
                fontColor={data.fontColor}
                fontSize={data.fontSize}
                text={data.text}
                xval={data.xval}
                yval={data.yval}
                nodeId={data.nodeId}
                nodeTableId={data.nodeTableId}
                isChecked={data.isChecked}
              />
            ))}
          </>
        );
    }
  }, [status, isFetching]);

useMutation

useQueryは、APIのgetリクエストを受信した場合にのみ使用できます.他のリクエストを送信する場合にも利用できるかどうかは不明ですが、残りのリクエストの部分は返信クエリの公式文書にUserMutationを使用すると書いてあります.

1.postリクエストの送信

useMutationを使用してpostリクエストを送信するコードは以下の通りです.

 const searchMutation = useMutation(sendingData => {
    URL.post(`/project/searching`, sendingData)
  });

 const inputEnter = e => {
    if (e.keyCode === 13) {
      searchMutation.mutate(sendingData);
    }
  };

検索機能で使用するuseMutation関数を取得しました.
useMutationを使用して、送信データと送信データの場所を設定します.mutate関数で使いやすいです.
では、postリクエストを送信した後に受け取った応答をどのように確認しますか?
しばらく李徳思の話をして、createAsyncThunkでpostリクエストを送信すると、受け取った応答を負荷に入れて状態に保存し、他のファイルからロードすることができます.

export const postNode = createAsyncThunk(
  "node/post",
  async(_, { rejectWithValue}) => {
    try {
      return await URL.post("/node", _).then((response) => response.data.nodeInfo);
    } catch (error) {
      console.error(error);
      return rejectWithValue(error.response);
    }
  }
)

では、ステータス管理がない場合、ユーザーワークステーションで受信したデータを他のjsファイルに渡す方法はありますか?
それを可能にしたのはsetQueryDataです.

2. setQueryData

  const searchMutation = useMutation(sendingData => {
    URL.post(`/project/searching`, sendingData).then(res => {
      queryClient.setQueryData(['searchResult'], res);
    });
  });

上のハーモニーにそして()一部増えました.
setQueryDataでクエリーキーを設定し、受信したデータをデータとして入力することで終了します.
initialstateの設定もstoreの購読も必要ありません.
クエリーキーがあれば、どこでもレンダリングできます.
検索APIが実行するページと結果を表示するページは別々です.
ただし,状態管理がなくても,データを反映することができる.

 const { data: searchResult } = useQuery(['searchResult'], () => {});

コードを必要な場所に追加するだけで、データを受信できます.これは、クエリー・キーで取得した値です.
後の空の関数はsetQueryDataの送信時にクエリー関数が渡されていませんが、受信した場所にクエリー関数がない場合は警告メッセージが発行されて挿入される関数です.

の最後の部分

まず、現在使用されている反応クエリの機能は、この程度です.
より多くの機能がありますが、今すぐ紹介するのはまだ早いです