I am trying to implement pagination in a comment section.
I have normal visual behavior on the website. When I click the get more button, 10 new comments are added.
My problem is the request is executed twice every time. I have no idea why. The first time, it is executed with a cursor value, the second time without it. It seems that the useQuery hook is executed after each fetchMore.
Any help would be appreciated. Thanks!
component :
export default ({ event }) => {
const { data: moreCommentsData, fetchMore } = useQuery(getMoreCommentsQuery, {
variables: {
id: event.id,
},
fetchPolicy: "cache-and-network",
});
const getMoreComments = () => {
const cursor =
moreCommentsData.event.comments[
moreCommentsData.event.comments.length - 1
];
fetchMore({
variables: {
id: event.id,
cursor: cursor.id,
},
updateQuery: (prev, { fetchMoreResult, ...rest }) => {
return {
...fetchMoreResult,
event: {
...fetchMoreResult.event,
comments: [
...prev.event.comments,
...fetchMoreResult.event.comments,
],
commentCount: fetchMoreResult.event.commentCount,
},
};
},
});
};
return (
<Container>
{moreCommentsData &&
moreCommentsData.event &&
moreCommentsData.event.comments
? moreCommentsData.event.comments.map((c) => c.text + " ")
: ""}
<Button content="Load More" basic onClick={() => getMoreComments()} />
</Container>
);
};
query :
const getMoreCommentsQuery = gql`
query($id: ID, $cursor: ID) {
event(id: $id) {
id
comments(cursor: $cursor) {
id
text
author {
id
displayName
photoURL
}
}
}
}
`;
Adding
nextFetchPolicy: "cache-first"
to the useQuery hook prevents making a server call when the component re renders.
This solved my problem.
Could it be that the second request you are seeing is just because of refetchOnWindowFocus, because that happens a lot...
I had a similar problem and I solved it by changing the fetchPolicy to network-only.
Please note, if you are hitting this issue with #apollo/client v3.5.x there was a bug related to this which was fixed from v3.6.0+. That commit solved the duplicated execution issue in my case.
It only makes one request if you are worried about that but the react component refreshes but not rerender each time an item in the useQuery hook changes.
Take for instance it would refresh the component when loading changes, making it seem like it sends multiple requests.
Related
I am somewhat new to React and I am running into an issue and I was hoping someone will be willing to help me understand why my method is not working.
I have this state:
const [beers, setBeers] = useState([
{
id: 8759,
uid: "8c5f86a9-87bf-41fa-bc7f-044a9faf10be",
brand: "Budweiser",
name: "Westmalle Trappist Tripel",
style: "Fruit Beer",
hop: "Liberty",
yeast: "1056 - American Ale",
malts: "Special roast",
ibu: "22 IBU",
alcohol: "7.5%",
blg: "7.7°Blg",
bought: false
},
{
id: 3459,
uid: "7fa04e27-0b6b-4053-a26b-c0b1782d31c3",
brand: "Kirin",
name: "Hercules Double IPA",
style: "Amber Hybrid Beer",
hop: "Nugget",
yeast: "2000 - Budvar Lager",
malts: "Vienna",
ibu: "18 IBU",
alcohol: "9.4%",
blg: "7.5°Blg",
bought: true
}]
I am rendering the beers with a map function and I have some jsx that calls a handleClick function
<button onClick={() => handleClick(beer.id)}>
{beer.bought ? "restock" : "buy"}
</button>
this is the function being called:
const handleClick = (id) => {
setBeers((currentBeers) =>
currentBeers.map((beer) => {
if (beer.id === id) {
beer.bought = !beer.bought;
console.log(beer);
}
return beer;
})
);
};
I wanted to use an updater function to update the state, I am directly mapping inside the setter function and since map returns a new array, I thought everything would work correctly but in fact, it doesn't. It works only on the first button click and after that it stops updating the value.
I noticed that if I use this method:
const handleClick = (id) => {
const newbeers = beers.map((beer) => {
if (beer.id === id) {
beer.bought = !beer.bought;
}
return beer;
});
setBeers(newbeers);
};
Then everything works as expected.
Can someone help me understand why my first method isn't working?
OK, I think I have figured it out. The difference between my sandbox and your sandbox is the inclusion of <StrictMode> in the Index file. Removing this fixes the issue, but is not the correct solution. So I dug a little deeper.
What we all missed was that in your code you were modifying the previous state object that is passed in. You should instead be creating a new beer object and then modifying that. So this code works (I hope):
setBeers((currentBeers) =>
currentBeers.map((currentBeer) => { // changed beer to currentBeer
const beer = {...currentBeer};
if (beer.id === id) {
beer.bought = !beer.bought;
}
return beer;
)
});
I hope that this helps.
react does not deeply compares the object in the state. Since you map over beers and just change a property, they are the same for react and no rerender will happen.
You need to set the state with a cloned object.
e.g.:
import {cloneDeep} from 'lodash';
...
setBeers(
cloneDeep(currentBeers.map((beer) => {
if (beer.id === id) {
beer.bought = !beer.bought;
console.log(beer);
}
return beer;
})
)
);
i have a homepage (/home) with a list of products as cards (retrieved
via useQuery) each of which has an upvote button
when I click upvote,
i trigger a mutation to upvote + a UI change to update the vote
count
when i go to another page, and then go back to /home,
useQuery doesn’t retrieve the products with the correct vote count
however, when I check my DB, the products all have the correct vote
count.
Why doesuseQuery not return the right amount until i do another page
refresh?
for reference, here it is below:
const Home = props => {
const {data, loading, error} = useQuery(GET_PRODUCTS_LOGGED_IN, {
variables: {
userid: props.userid
}
});
console.log(
'data', data.products // this data is outdated after I go from /home -> /profile -> /home
);
return (
<Container>
{_.map(data.products, product => (
<VoteButton
hasVoted={product.hasVoted}
likes={product.likes}
productid={product.productid}
/>
))}
</Container>
);
}
const VoteButton = ({likes, hasVoted, productid}) => {
const [localHasVoted, updateLocalHasVoted] = useState(hasVoted);
const [likesCount, updateLikesCount] = useState(likes);
const [onVote] = useMutation(VOTE_PRODUCT);
const onClickUpvote = (event) => {
onVote({
variables: {
productid
}
})
updateLocalHasVoted(!localHasVoted);
updateLikesCount(localHasVoted ? likesCount - 1 : likesCount + 1);
}
return (
<VoteContainer onClick={onClickUpvote}>
<VoteCount >{likesCount}</VoteCount>
</VoteContainer>
);
};
On your useQuery call, you can actually pass it a config option called 'fetch-policy' which tells Apollo how you want the query to execute between making the call or using the cache. You can find more information here, Apollo fetch policy options.
A quick solution would be be setting fetch-policy to cache and network like the the example below.
const {data, loading, error} = useQuery(GET_PRODUCTS_LOGGED_IN, {
variables: {
userid: props.userid
},
fetchPolicy: 'cache-and-network',
});
You can also make it so that when your mutation happens, it will run your query again by setting the 'refetch-queries' option on useMutation like the code below.
This will cause your query to trigger right after the mutation happens.
You can read more about it here Apollo mutation options
const [onVote] = useMutation(VOTE_PRODUCT, {
refetchQueries: [ {query: GET_PRODUCTS_LOGGED_IN } ],
});
I'm trying Apollo and using the following relevant code:
const withQuery = graphql(gql`
query ApolloQuery {
apolloQuery {
data
}
}
`);
export default withQuery(props => {
const {
data: { refetch, loading, apolloQuery },
} = props;
return (
<p>
<Button
variant="contained"
color="primary"
onClick={async () => { await refetch(); }}
>
Refresh
</Button>
{loading ? 'Loading...' : apolloQuery.data}
</p>
);
});
The server delays for 500ms before sending a response with { data: `Hello ${new Date()}` } as the payload. When I'm clicking the button, I expect to see Loading..., but instead the component still says Hello [date] and rerenders half a second later.
According to this, the networkStatus should be 4 (refetch), and thus loading should be true. Is my expectation wrong? Or is something regarding caching going on that is not mentioned in the React Apollo docs?
The project template I'm using uses SSR, so the initial query happens on the server; only refetching happens in the browser - just if that could make a difference.
I think that you need to specify notifyOnNetworkStatusChange: true in the query options (it's false by default).
I'm writing this product list component and I'm struggling with states. Each product in the list is a component itself. Everything is rendering as supposed, except the component is not updated when a prop changes. I'm using recompose's withPropsOnChange() hoping it to be triggered every time the props in shouldMapOrKeys is changed. However, that never happens.
Let me show some code:
import React from 'react'
import classNames from 'classnames'
import { compose, withPropsOnChange, withHandlers } from 'recompose'
import { addToCart } from 'utils/cart'
const Product = (props) => {
const {
product,
currentProducts,
setProducts,
addedToCart,
addToCart,
} = props
const classes = classNames({
addedToCart: addedToCart,
})
return (
<div className={ classes }>
{ product.name }
<span>$ { product.price }/yr</span>
{ addedToCart ?
<strong>Added to cart</strong> :
<a onClick={ addToCart }>Add to cart</a> }
</div>
)
}
export default compose(
withPropsOnChange([
'product',
'currentProducts',
], (props) => {
const {
product,
currentProducts,
} = props
return Object.assign({
addedToCart: currentProducts.indexOf(product.id) !== -1,
}, props)
}),
withHandlers({
addToCart: ({
product,
setProducts,
currentProducts,
addedToCart,
}) => {
return () => {
if (addedToCart) {
return
}
addToCart(product.id).then((success) => {
if (success) {
currentProducts.push(product.id)
setProducts(currentProducts)
}
})
}
},
}),
)(Product)
I don't think it's relevant but addToCart function returns a Promise. Right now, it always resolves to true.
Another clarification: currentProducts and setProducts are respectively an attribute and a method from a class (model) that holds cart data. This is also working good, not throwing exceptions or showing unexpected behaviors.
The intended behavior here is: on adding a product to cart and after updating the currentProducts list, the addedToCart prop would change its value. I can confirm that currentProducts is being updated as expected. However, this is part of the code is not reached (I've added a breakpoint to that line):
return Object.assign({
addedToCart: currentProducts.indexOf(product.id) !== -1,
}, props)
Since I've already used a similar structure for another component -- the main difference there is that one of the props I'm "listening" to is defined by withState() --, I'm wondering what I'm missing here. My first thought was the problem have been caused by the direct update of currentProducts, here:
currentProducts.push(product.id)
So I tried a different approach:
const products = [ product.id ].concat(currentProducts)
setProducts(products)
That didn't change anything during execution, though.
I'm considering using withState instead of withPropsOnChange. I guess that would work. But before moving that way, I wanted to know what I'm doing wrong here.
As I imagined, using withState helped me achieving the expected behavior. This is definitely not the answer I wanted, though. I'm anyway posting it here willing to help others facing a similar issue. I still hope to find an answer explaining why my first code didn't work in spite of it was throwing no errors.
export default compose(
withState('addedToCart', 'setAddedToCart', false),
withHandlers({
addToCart: ({
product,
setProducts,
currentProducts,
addedToCart,
}) => {
return () => {
if (addedToCart) {
return
}
addToCart(product.id).then((success) => {
if (success) {
currentProducts.push(product.id)
setProducts(currentProducts)
setAddedToCart(true)
}
})
}
},
}),
lifecycle({
componentWillReceiveProps(nextProps) {
if (this.props.currentProducts !== nextProps.currentProducts ||
this.props.product !== nextProps.product) {
nextProps.setAddedToCart(nextProps.currentProducts.indexOf(nextProps.product.id) !== -1)
}
}
}),
)(Product)
The changes here are:
Removed the withPropsOnChange, which used to handle the addedToCart "calculation";
Added withState to declare and create a setter for addedToCart;
Started to call the setAddedToCart(true) inside the addToCart handler when the product is successfully added to cart;
Added the componentWillReceiveProps event through the recompose's lifecycle to update the addedToCart when the props change.
Some of these updates were based on this answer.
I think the problem you are facing is due to the return value for withPropsOnChange. You just need to do:
withPropsOnChange([
'product',
'currentProducts',
], ({
product,
currentProducts,
}) => ({
addedToCart: currentProducts.indexOf(product.id) !== -1,
})
)
As it happens with withProps, withPropsOnChange will automatically merge your returned object into props. No need of Object.assign().
Reference: https://github.com/acdlite/recompose/blob/master/docs/API.md#withpropsonchange
p.s.: I would also replace the condition to be currentProducts.includes(product.id) if you can. It's more explicit.
I have a problem with understanding Apollo fetchMore method. I'm new to this tool and example in doc is too much complicated for me. I was searching on the internet but I can't find more (current) examples. Can you help me write a most simple example of infinite loading data? I have this code:
const productInfo = gql`
query {
allProducts {
id
name
price
category {
name
}
}
}`
const ProductsListData = graphql(productInfo)(ProductsList)
and I want to fetch 5 products and 5 more after every click on 'Load More' button. I understand the idea of this - cursor e.t.c but I don't know how to implement this. (I'm using React)
For infinite loading, you would use a cursor. Referencing the example on the Apollo documentation, http://dev.apollodata.com/react/pagination.html#cursor-pages
Tailoring this to your schema you've provided, it would look something like this (Untested)
const ProductsListData = graphql(productInfo, {
props({ data: { loading, cursor, allProducts, fetchMore } }) {
return {
loading,
allProducts,
loadMoreEntries: () => {
return fetchMore({
variables: {
cursor: cursor,
},
updateQuery: (previousResult, { fetchMoreResult }) => {
const previousEntry = previousResult.entry;
const newProducts = fetchMoreResult.allProducts;
return {
cursor: fetchMoreResult.cursor,
entry: {
allProducts: [...previousEntry.entry.allProducts, ...newProducts],
},
};
},
});
},
};
},
})(ProductsList);
You'll likely have to play around with the pathing of the objects as this should look similar to your schema. But for the most part this is what your infinite scrolling pagination implementation should look like.
Check out this tutorial by graphql.college https://www.graphql.college/building-a-github-client-with-react-apollo/
Also, you can take a look at my implementation on Github. Specifically, check ./src/views/profile on the query-mutation-with-hoc branch