In my current situation, I use Apollo useQuery to fetch a user and their posts.
The posts render in a summary view and in a detailed view. the detailed view is sitting on top of the summary view and its visibility is controlled by a piece of state.
const { data: userData, error: userError } = useQuery(GET_USER_BY_ID, { // the data fetch
variables: {
userId: getUserId(),
}
})
const [showPosts, setShowPosts] = useState(false) // controls toggle between views
the problem im having is every time the showPosts state changes the component re renders and the useQuery is run again. which I do not want. I have already got all my data, I just want to render html without hitting the server again until I need to. What is a potential solution to my problem?
Check skip param, You can do something like this:
const { data: userData, error: userError } = useQuery(GET_USER_BY_ID, { // the data fetch
variables: {
userId: getUserId(),
skip:!showPosts
}
})
or use useLazyQuery