Question

我只是在研究COVID-19追踪器，所以我遇到了问题。在Apollo中，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;

反应一次Apollo提取

1 个答案: