Question

我有一个查询，需要输入参数，例如日期

  const { loading, data, error } = useQuery(GET_LIST, {
    variables: {
      input: {
        date: date,
      },
    },
  });

export const GET_LIST = gql`
  query list($input: ListParams) {
    list(input: $input) {
      totalCount
      recordCount
      list {
        listId
        date
        qty
        amount
        currency
      }
    }
  }
`;

input ListParams {
  date: String
}

我需要获取列表，用户可以在其中基于日期进行过滤。现在在初始加载时，未设置日期，将调用查询。用户设置日期，没有问题，现在使用日期值再次调用查询，现在当用户删除日期过滤器时，日期值变为未定义，并且我希望这次再次使用useQuery而不使用任何变量，但它从未被调用。

我也尝试设置空字符串，即使那样useuse不会被调用，这不是预期的行为

 input: {
        date: date||'',
      },

Answer 1

当您传递给 useQuery 钩子的查询变量与之前的值相同时，Apollo-Cilent 具有缓存机制。

文档： https://www.apollographql.com/docs/react/data/queries/ 沙盒： https://codesandbox.io/embed/usequery-example-apollo-client3-dx626

您可以使用内置于 useQuery 钩子中的重新获取或轮询机制来解决此问题：

function Date({ date }) {

const { loading, data, error, refetch } = useQuery(GET_LIST, {
    variables: {
      input: {
        date: date,
      },
    },
  });
//...
return (<div>
      <Component data={data} onDateChange={() => refetch()}/>
    </div>)
}

或者，如果查询中的空/未定义变量不是特定目的，您可能不应该通过添加 {!input.date && <Date /> } 来呈现组件，或者通过在您的查询中添加 skip 变量而不发送任何查询使用查询钩子：


const { loading, data, error, refetch } = useQuery(GET_LIST, {
    variables: {
      input: {
        date: date,
      },
    },
    skip: !input?.date // <------ Skip the query when input.date is missing or empty
  });

迟到的答案（我想你可能已经解决了这个问题），我在这里写了一些笔记，以防其他人遇到这个问题。

当输入对象中的变量设置为未定义或空字符串时，useQuery不会触发

1 个答案: