# Fetchmore with relay

**URL:** <https://community.apollographql.com/t/fetchmore-with-relay/7067>\
**Category:** Client SDKs\
**Tags:** web\
**Created:** [December 19, 2023, 12:20pm UTC](https://community.apollographql.com/t/fetchmore-with-relay/7067 "2023-12-19T12:20:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ahmed\_Salam](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/ahmed_salam/32/4823_2.png) [@Ahmed\_Salam](https://community.apollographql.com/u/Ahmed_Salam)\
**Post date:** [December 19, 2023, 12:20pm UTC](https://community.apollographql.com/t/fetchmore-with-relay/7067/1 "2023-12-19T12:20:53Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [December 20, 2023, 5:38pm UTC](https://community.apollographql.com/t/fetchmore-with-relay/7067/2 "2023-12-20T17:38:56Z")

</div>

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

> **[Cursor-based pagination](https://www.apollographql.com/docs/react/pagination/cursor-based/#relay-style-cursor-pagination)**

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:47pm UTC](https://community.apollographql.com/t/fetchmore-with-relay/7067/3 "2025-02-06T20:47:54Z")

</div>