Apollographql - Changes To Entries In Objects In Local State & Re-rendering?
Let's say I have an object in my local state and 2 types of query on that object: -
anObject {
__typename: "AnObject"
thisThing: ""
thatThing: ""
}
Query 1
{
anObject @client
}
Query 2
{
anObject @client {
thisThing
}
}
2 scenarios:-
A component was running Query 1 but does not use anObject.thatThing in it's render function.
A component was running Query 2 (which does not query thatThing).
Now, let's say another component mutated anObject.thatThing. I would assume scenario 1 would cause the component to re-render as it is subscribed to that entire object in the local state (via Query 1) whereas in scenario 2 the component would no re-render if anObject.thatThing mutated as it is only subscribed to a single (different) fragment of that object. Is that correct?
Answer
You have wrong assumptions.
Standard Query
is not a Subscription
or an ObservableQuery
- it's an one time query, it won't force automatic update/refetch/render on external changes.
You can use the options listed above or [the simplest] pollInterval
option.
For deeper object updates you should use shouldComponentUpdate
method.
UPDATE
@client
directive changes default querying behaviour. From docs:
Once you call client.writeData, the query result on the render prop function will automatically update.
It may look like a subscription but it isn't. Query is refetched in both cases. Rerendering of child component depends on its props changes. It won't be rerendered if props passed won't change - for the same query result or passing/using only unchanged result fragments (object properties).
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?