Блог

Я использую graphql для получения некоторых данных с сервера.

после того, как данные будут доставлены мне, мне нужно преобразовать эти данные(изменить их так, чтобы я предоставил своему компоненту готовые данные).

У меня есть досье subscription-hooks.tsx …

 export function useLazyProposalDetails() {
  const [getProposalData, { loading, data }] = useLazyQuery(PROPOSAL_DETAILS);

  const proposalData = React.useMemo(() => {
    if (!data) {
      return null;
    }
    return transformProposalDetails(data);
  }, [data]);

  return { getProposalData, loading, data: proposalData };
}
 

и в своем компоненте я использую его так:

 const {
    getProposalData,
    data: proposalDetailsData,
    loading: isLoadingProposalDetails,
  } = useLazyProposalDetails();

  useEffect(() => {
    if (proposalDetailsData) {
      // console.log(proposalDetailsData, ' goodone');
      updateProposalInfo(proposalDetailsData.container);
    }
  }, [proposalDetailsData]);
 

Теперь идея в том, что transformProposalDetails в настоящее время просто очень хорошо изменяет данные, но это простая вещь.. теперь мне нужно transformProposalDetails действовать как асинхронный вызов, потому что в этом преобразовании, чтобы изменить одно из полей, мне нужно выполнить асинхронный вызов(вызов RPC, но я думаю, вы можете назвать его вызовом API).

Каков правильный подход для достижения этой цели ?

Способ 1. вместо proposalData того , что является a useMemo , я могу изменить его на useCallback и сделать его асинхронным. затем transformProposalDetails также становится асинхронным. И в моем компоненте, в моем useEffect , я сначала вызываю функцию, а не использую значение, потому useCallback что это вернет функцию.

Способ 2. Просто сделайте все так , как у меня есть, и useEffect я снова преобразую поля, к которым требуется async подход. Причина, по которой мне не нравится этот способ, заключается в том, что было бы действительно хорошо когда-нибудь испытать трансформацию transformProposalDetails .

Есть ли какой-нибудь другой способ ?

Спасибо…