使用分页容器和 loadMore

问题描述

使用react 17 和relay-modern 11 我想建立一个列表，当一个人到达最后时，他们可以点击一个显示加载更多的按钮，它会向列表中添加更多条目。这是我到目前为止所拥有的。行是名称和光标

看到我应该点击加载更多，它应该添加额外的 5 行数据。当我点击加载更多

时会发生这种情况

看到它确实获取了 5 个新节点。我可以说，因为游标是独一无二的。但是它并没有像我想要的那样将它附加到列表中。

当我不断点击加载更多，直到没有更多数据时，我怎样才能让这个列表一直持续构建？

这是我的代码：

组件的根：

// index.js
import React,{ useState } from "react";
import { Text,View } from "react-native";
import { QueryRenderer,useRelayEnvironment } from "react-relay";
import PaginatedProfilesListContainer from "./PaginatedProfilesListContainer";

const ProfilesList = () => {
  const environment = useRelayEnvironment();
  const [count,setCount] = useState(5);
  const [name,setName] = useState("");

  const query = graphql`
    query ProfilesListQuery(
      $count: Int!
      $cursor: String
      $filter: ProfileFilter
    ) {
      ...PaginatedProfilesListContainer_list
    }
  `;

  const filter = {
    name,};
  const variables = {
    count: 5,cursor: null,filter,};

  const render = ({ error,props,retry }) => {
    if (error) {
      return (
        <View>
          <Text>{error.message}</Text>
        </View>
      );
    } else if (props) {
      return (
        <View>
          <PaginatedProfilesListContainer
            pagination={props}
            count={count}
            setCount={setCount}
            name={name}
            setName={setName}
            filter={filter}
          />
        </View>
      );
    } else {
      return (
        <View>
          <Text>loading profiles list...</Text>
        </View>
      );
    }
  };
  console.log("vriable",variables)

  return (
    <QueryRenderer
      environment={environment}
      query={query}
      variables={variables}
      render={render}
    />
  );
};

export default ProfilesList;

这是应该列出对象的组件

// PaginatedProfilesListContainer.js
import React from "react";
import { Text,View } from "react-native";
import { Button } from "react-native-paper";
import { createPaginationContainer } from "react-relay";
import { FadoTextInput } from "../forms/fadoTextInput";

const PaginatedProfilesListContainer = (props) => {
  console.log(props);
  console.log("createPaginationContainer",createPaginationContainer)
  // console.log(pagination)
  const { pagination,count,setCount,name,setName,relay,filter } = props;
  const { hasMore,loadMore,refetchConnection } = relay;
  console.log(loadMore)
  const { profiles } = pagination;
  const { edges,pageInfo } = profiles;
  return (
    <View>
      <View>
        <FadoTextInput
          dense={true}
          isNumeric={true}
          graphqlErrors={[]}
          label="count"
          errorKey="count"
          // savedValue={price.amount}
          value={count}
          onChangeText={setCount}
        />
        <FadoTextInput
          dense={true}
          isNumeric={false}
          graphqlErrors={[]}
          label="name"
          errorKey="name"
          // savedValue={price.amount}
          value={name}
          onChangeText={setName}
        />
      </View>
      {edges.map(({ cursor,node: { name } }) => (
        <View key={cursor} style={{ display: "flex",flexDirection: "row"}}>
          <Text>{name}</Text>
          <Text>{cursor}</Text>
        </View>
      ))}
      <Button disabled={!hasMore()} onPress={() => loadMore(count,(error) => { error &&  console.log("error",error); })}>
        Load More
      </Button>
    </View>
  );
};
export default createPaginationContainer(
  PaginatedProfilesListContainer,{
    pagination: graphql`
      fragment PaginatedProfilesListContainer_list on RootQueryType {
        profiles(first: $count,after: $cursor,filter: $filter)
          @connection(key: "PaginatedProfilesListContainer_profiles") {
          pageInfo {
            endCursor
            hasNextPage
            hasPreviousPage
            startCursor
          }
          edges {
            cursor
            node {
              name
            }
          }
        }
      }
    `,},{
    direction: 'forward',query: graphql`
      query PaginatedProfilesListContainerQuery(
        $count: Int!
        $cursor: String
        $filter: ProfileFilter
      ) {
        ...PaginatedProfilesListContainer_list
      }
    `,getConnectionFromProps(props) {
      console.log(props)
      return props.pagination?.profiles
    },getFragmentVariables(prevVars,totalCount) {
      return {
        ...prevVars,count: totalCount,};
    },getVariables(props,{ count,cursor },fragmentVariables) {
      return {
        count,cursor,filter: {},}
);

这种方法的灵感来自https://github.com/facebook/relay/issues/1705

注意：我尝试使用@stream_connection，但后端的 Elixir Absinthe 似乎不支持它。

我知道这很长所以请感谢任何帮助:)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）