Apollo Client - FetchMore 使用 useLazyQuery,变量不更新(用于偏移分页)

时间:2021-04-16 14:02:07

标签: apollo-client react-apollo

预期结果: 我们按照 apollo 文档 (https://www.apollographql.com/docs/react/pagination/offset-based/) 进行了分页实现。使用读取/合并功能 我们期望一旦我们调用 fetchMore 函数并手动更新变量,就会使用新变量调用 read 函数。

Apollo docs snippet

实际结果: 我们无法使分页正常工作,数据已正确获取但未正确显示。不良显示是由未更新的变量引起的。 “读取”函数始终接收原始查询的变量。

useEffect(() => {
    if (isDefined(fetchMore)) {
      fetchMore({
        variables: {
          offset:
            currentPage === 1
              ? (currentPage - 1) * total
              : (currentPage - 1) * total + 1,
          first: total,
          searchString: searchString
        }
      })
    } else {
      getData({
        variables: {
          offset: 0,
          first: total,
          searchString: searchString
        }
      })
    }    }, [currentPage, fetchMore, searchString, getData])

我们也尝试手动更新我们的变量,因为我们没有使用 useQuery,而是使用了 useLazyQuery。

 client
    .watchQuery({
      query: GET_REPORTS,
      variables: {
        offset: 0,
        first: total,
        searchString: searchString
      }
    })
    .setVariables({
      offset:
        currentPage === 1
          ? (currentPage - 1) * total
          : (currentPage - 1) * total + 1,
      first: 25,
      searchString
    })

我们的类型政策:

typePolicies: {
        Query: {
          fields: {
            REPORT: {
              keyArgs: false,
              read(existing, {args}) {
                **//here we would expect for our args to change, the moment we try fetch our 
                //second page**
                return existing && existing.slice(args.offset, args.offset + args.first)
              },
    
              // The keyArgs list and merge function are the same as above.
    
              merge(existing, incoming, { args: { offset = 0 } }) {
                const merged = existing ? existing.slice(0) : []
                for (let i = 0; i < incoming.length; ++i) {
                  merged[offset + i] = incoming[i]
                }
                return merged
              }
            }
          }
      }
    }

0 个答案:

没有答案