I am making a news app from wordpress with graphql and apollo client v5.4.16 (the latest version gives an error with RN metro, I tried to solve it and it keeps showing me an error) …
well to the point. I have the app almost built, but I have a problem displaying more data as the user scrolls the screen.
this is my query:
query inicioQuery($first: Int!, $after: String){
posts (first: $first, after: $after) {
pageInfo {
endCursor
hasNextPage
}
edges {
node {
id
title
slug
date
categories {
nodes {
name
}
}
tags {
edges {
node {
name
}
}
}
featuredImage {
node {
sourceUrl
}
}
}
}
}
}
I am using the cursor method since when I try to use offset I get an error where it does not recognize the offset variable
and this is my flatlis and updatequery code:
function posts({navigation}) {
const scheme = useColorScheme();
const { data, error, loading, fetchMore, refetch, networkStatus } = useQuery(
POSTS_INICIO_QUERY,
{
variables:{first:20},
notifyOnNetworkStatusChange: true
}
)
if (error)
return (
<View style={styles.loading}>
<Text style={styles.errorText}>Algo Salio Mal :(</Text>
</View>
)
console.log(data);
let posts = [];
if(data && data.posts && data.posts.edges)
posts = data.posts.edges;
const onUpdate = (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) return prev;
const { pageInfo } = fetchMoreResult.posts;
const node = [
...prev.posts.edges.node,
...fetchMoreResult.posts.edges,
];
return Object.assign({}, prev, {
posts: {
__typename: prev.posts.edges.__typename,
edges: {
__typename: prev.posts.__typename,
pageInfo,
node,
},
},
});
};
const handleOnEndReached = () => {
if (data.posts.pageInfo.hasNextPage)
return fetchMore({
variables: {
after: data.posts.pageInfo.endCursor,
first: 20,
},
updateQuery: onUpdate,
});
};
if(loading && posts.length === 0){
return (
<View style={styles.loading}>
<ActivityIndicator size="large" color="#17A0D1" />
</View>
)
}
const refreshing = networkStatus === NetworkStatus.refetch;
return(
<View style={styles.scroll}>
<FlatList
contentContainerStyle={styles.scroll}
data={posts}
renderItem={({item})=>{
if(!item.node){
return;
}
//Validate Image
let url;
if(item.node.featuredImage === null){
url = 'https://images5.alphacoders.com/115/thumb-1920-1150108.png'
}else{
url = item.node.featuredImage.node.sourceUrl;
}
//Validate Tags
let tag = item.node.tags.edges
if (!tag.length){
tag = 'no tag'
} else{
tag = item.node.tags.edges[0].node.name ;
}
return(
<View style={styles.welcom}>
<Text style={{
fontSize:16,
fontWeight:'bold',
fontStyle:'italic',
color: scheme === 'dark' ? 'white' : 'gray'
}}>
Te mantenemos informado hoy y siempre
</Text>
</View>,
<TouchableOpacity style={styles.infocontainer}>
<Image
style={styles.postimg}
source={{uri: url}}
resizeMode = 'cover'
/>
<View style={styles.textcontainer}>
<View style={styles.termscontainer}>
<Text style={styles.category}>{item.node.categories.nodes[0].name}</Text>
<Text style={{color: scheme === 'dark' ? 'white' : '#151515' }}> | </Text>
<Text style={styles.tag}>{tag}</Text>
<Text style={{color: scheme === 'dark' ? 'white' : '#151515' }}> | </Text>
<Text style={styles.date}>{Moment(item.node.date).format('D MMM YYYY')}</Text>
</View>
<Text style={styles.title}>{item.node.title}</Text>
</View>
</TouchableOpacity>
)
}}
keyExtractor={(item)=> item.node.id }
onEndReachedThreshold={0.5}
onEndReached={handleOnEndReached}
onRefresh={refetch}
refreshing={refreshing}
showsHorizontalScrollIndicator={false}
/>
</View>
)
}
and these are the warnings that appear to me:
Although these warnings appear, the app does not show me more data …
I don’t have much experience in RN
I need help with this and thanks in advance