反应阿波罗获取一次

Question

我正在研究简单的 COVID-19 追踪器，但遇到了问题。 Apollo for React 是否有任何选项可以在每次按下按钮时获取一次 graphql 数据？

现在我有 TextInput 和 Button，但是当我一次获取数据时，我无法在输入中输入另一个国家，因为我立即出现错误。

const Tile = () => {
  const [country, setCountry] = useState('Poland');
  const [cases, setCases] = useState(0);

  const MY_QUERY = gql`
    query getCountryStats($country: String!) {
      country(name: $country) {
        todayCases
      }
    }
  `;

  const [getCountryStats, {data, loading, error}] = useLazyQuery(MY_QUERY, {
    variables: {
      country: country,
    },
    onCompleted: (data) => {
      setCases(data.country.todayCases);
    },
  });

  if (loading) return <Text>LOADING...</Text>;
  if (error) return <Text>Error!</Text>;

  return (
    <View>
      <CasesNumber>{cases}</CasesNumber>
      <FinderWrapper>
        <FinderInput
          onChangeText={(text) => {
            setCountry(text);
          }}
        />
        <FinderButton
          onPress={() => {
            getCountryStats();
          }}>
          <Text>FIND</Text>
        </FinderButton>
      </FinderWrapper>
    </View>
  );
};

export default Tile;

Answer 1

试试这个

const Tile = () => {
  const [country, setCountry] = useState('Poland');
  const [cases, setCases] = useState(0);

  let inputValue = ‘’;


  const MY_QUERY = gql`
    query getCountryStats($country: String!) {
      country(name: $country) {
        todayCases
      }
    }
  `;

  const [getCountryStats, {data, loading, error}] = useLazyQuery(MY_QUERY, {
    variables: {
      country: country,
    },
    onCompleted: (data) => {
      setCases(data.country.todayCases);
    },
  });

  const onGetCountryStats = () => {
    
    setCountry(inputValue);
    getCountryStats();
  }

  if (loading) return <Text>LOADING...</Text>;
  if (error) return <Text>Error!</Text>;

  return (
    <View>
      <CasesNumber>{cases}</CasesNumber>
      <FinderWrapper>
        <FinderInput
          onChangeText={(text) => {
           inputValue = text;
          }}
        />
        <FinderButton
          onPress={() => {
           onGetCountryStats();
          }}>
          <Text>FIND</Text>
        </FinderButton>
      </FinderWrapper>
    </View>
  );
};

export default Tile;

反应阿波罗获取一次

React Apollo fetch once

react-native

react-apollo

apollo-client