Fetchmore with relay

Help
1

I want to add fetchmore and append the result into previous one how can i do this?

import {View, Text, TextField, Button} from 'app/design';

import OkHttpList from 'app/components/OkHttpList';
import OkCommunityCard from 'app/components/cards/OkCommunityCard';
import {Link} from 'app/design/Link';
import {useTranslation} from 'react-i18next';
import {useCommunitiesQuery, useJoinCommunityMutation} from 'app/services/api/graphql';

export default function OkDesktopCommunitiesYouCategory() {
  const { loading, error, data, fetchMore } = useCommunitiesQuery({
    variables: {
      first: 5
    }
  });
  const pageInfo = data?.communities?.pageInfo;
  const nodes = data?.communities?.edges
  const  {data: joind_data } =useJoinCommunityMutation();
  const {t} = useTranslation();
  return (
    <View>
      <Text className="text-2xl font-bold dark:text-white">{'All communities'}</Text>
      <OkHttpList listType="community">
        <View className="flex-row flex-wrap gap-4 p-2">
          {
            nodes?.map((community) => {
              return (
                <Link key={community?.node?.id} href={`/c/${community?.node?.name}`}>
                  <OkCommunityCard 
                    // className="m-2 w-32 rounded-lg"
                    community={community?.node}
                    trailing={<Text>{community?.node?.membersCount}</Text>}
                  />
                </Link>
              )
            })
          }
        </View>
      </OkHttpList>
      {/* <Button onPress={() => {
           if (pageInfo.hasNextPage) {
            console.log("woe", pageInfo.hasNextPage, pageInfo.endCursor);
            fetchMore({
              variables: {
                cursor: pageInfo.endCursor,
                after: pageInfo.endCursor,
             },
            });
          }
            
          }}  label={'fetch more'} />  */}
          <Button onPress={() => fetchMore({
            variables: {
              after: pageInfo.endCursor,

            }, updateQuery(prev, {fetchMoreResult }) {
              console.log(fetchMoreResult)
              // if (!fetchMoreResult) return prev;
              return {...prev, ...fetchMoreResult} 
             
            },
          })}  label={'fetch more'} />

      {/* <Button onPress={() => fetchMore({
            variables: {
            first:5,
            offset: data?.communities?.edges.length, 
            }, updateQuery(prev, {fetchMoreResult }) {
              if (!fetchMoreResult) return prev;
              return {
                communities: [...prev?.communities?.edges, ...fetchMoreResult.communities?.edges]
              };
            },
          })}  label={'fetch more'} /> */}
      <Text className="text-gray-500">{t('community__favorite_communities')}</Text>

      <Text className="text-2xl font-bold dark:text-white">
        {t('community__administrated_title')}
      </Text>
      <OkHttpList listType="community">
        <View className="flex-row flex-wrap gap-4 p-2">
          {/* {[1, 2, 3, 4].map((item, idx) => (
            <Link key={idx} href={`/c/${item}`}>
              <OkCommunityCard className="m-2 w-32 rounded-lg" />
            </Link>
          ))} */}
        </View>
      </OkHttpList>
      <Text className="text-gray-500">{t('community__administrated_communities')}</Text>

      <Text className="text-2xl font-bold dark:text-white">{t('community__moderated_title')}</Text>
      <OkHttpList listType="community">
        <View className="flex-row flex-wrap gap-4 p-2">
          {/* {[1, 2, 3, 4].map((item, idx) => (
            <Link key={idx} href={`/c/${item}`}>
              <OkCommunityCard className="m-2 w-32 rounded-lg" />
            </Link>
          ))} */}
        </View>
      </OkHttpList>
      <Text className="text-gray-500">{t('community__moderated_communities')}</Text>

      <Text className="text-2xl font-bold dark:text-white">{t('community__joined_title')}</Text>
      <OkHttpList listType="community">
         <View className="flex-row flex-wrap gap-4 p-2">
         {
            joind_data?.joinCommunity?.map((community) => {
              return (
                <Link key={community?.id} href={`/c/${community?.name}`}>
                  <OkCommunityCard 
                    className="m-2 w-32 rounded-lg"
                    title={community?.title}
                    name={community?.name}
                    membersCount= {community?.membersCount}
                  />
                </Link>
              )
            })
          }
        </View>
      </OkHttpList>
      <Text className="text-gray-500">{t('community__joined_communities')}</Text>
    </View>
  );
}
2

Hi @Ahmed_Salam :wave: welcome to the Forum! I recommend reviewing the following documentation page if you haven’t already: