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

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 再次调用时没有变量，但它从未被调用。

我也尝试过设置空字符串，即使这样 useQuery 也没有被调用，这不是预期的行为

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

Answer 1

当您传递给 useQuery Hook 的查询变量与先前的值相同时，Apollo-Cilent 有一个缓存机制。

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

您可以通过使用 useQuery Hook 中内置的重新获取或轮询机制来解决此问题:

function Date({ date }) {

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

或者，如果查询中的空/ undefined variable 没有特定用途，您可能不应该通过添加 {!input.date && <Date /> } 来呈现组件。或者通过添加 skip 不发送任何查询useQuery Hook 中的变量:

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
  });

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