reactjs - 使用分页容器和加载的无限滚动继电器现代（v11）更多

Question

使用 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 似乎不支持它。

我知道这很长，所以请任何帮助表示赞赏:)