如何限制useQuery的api调用只调用一次？答案

【问题标题】：How to restrict api call by useQuery to be called only once?如何限制useQuery的api调用只调用一次？
【发布时间】：2021-01-31 22:31:09
【问题描述】：

我关注的组件有一个date 变量。在每次重新渲染时，date 变量都会更新。现在的问题是，当我将日期分配给查询变量时，graphql 一次又一次地无限获取。我调试了代码，发现apollo正在观察date变量，当它接收到一个新值时，它是re。

import React from 'react';
import { getISODate } from '../../dateUtils';
import { useQuery } from '@apollo/react-hooks';
import { GET_EXPENSE_STATUS } from '../../queries';
import get from 'lodash/get';

const ExpenseStatus = (props) => {
  const date = getISODate(); // returns current date as ISO String Format
  const { loading, error, data } = useQuery(GET_EXPENSE_STATUS, {
    variables: {
      date
    }
  });
  if (error) return <p>Error :(</p>;
  return(
    <div>
       {get(data, 'expenseStatus.value')}
    </div>
  );
};

我也试过useLazyQuery。但没有运气。

 const date = getISODate(); // returns current date in ISO String

 const [loadExpenseStatus, { loading, error, data }] = useLazyQuery(GET_EXPENSE_STATUS, {
     variables: {
       date
     }
 });

 useEffect(() => {
   if(!called) {
     loadExpenseStatus();
   }
 }, []);

那么，有什么办法可以跳过这个观察者吗？我只想接收一次 fetch 调用。

【问题讨论】：

这个问题可能重复stackoverflow.com/questions/56964838/…
您也可以使用const [staticDate] = useState( getISODate() ) - 触发一次 - 作为变量参数 (date: staticDate)
你不需要 lodash 来防止未定义的数据 .. 只需在主返回之前使用 if(loading) return "loading";
它不重复:)
除了引入状态变量，还有其他选择吗？ @xdam。我知道加载部分。但我不想要那个

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

两种可能的解决方案，第一种（初始值“冻结”）：

const [staticDate] = useState( getISODate() );
const { loading, error, data } = useQuery(GET_EXPENSE_STATUS, {
  variables: {
    date: staticDate
  }
});

或者简单的const [date] = useState( getISODate() );和variables: { date } ...当date在其他地方需要当前值时。

第二个（当输出/渲染中不需要“日期”值时）：

const [loadExpenseStatus, { loading, error, data }] = useLazyQuery(GET_EXPENSE_STATUS);

useEffect(() => {
  loadExpenseStatus( {
    variables: {
      date: getISODate()
    }
  } );
}, []); // called once

文档：https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually

【讨论】：

我在寻找第二个选项。谢谢