Anyone who is used to using apollo-client as state manager knows that has a fantastic but bureaucratic tool at hand.
A changing in a list of todos, for example, can be a reasonably uncomfortable task, like the twenty-something lines of code below :
Expecting to reduce the effort on jobs like these, I’ve been thinking of ways to make them a little simpler and more straightforward.
The question I’ve tried to answer recently was: is there a way to make this task as simple as using the hook useState?
And yes, it is possible. In the next few lines, I will share the answer found.
The use of hooks is a powerful resource for structuring the behavior of our applications.
It’s amazing how many lines of code I’ve been saving by encapsulating the behavior of my components in these functions.
Since I adopted useState for the local state management of my components, I've been looking for ways to do the same for a broader scope.
For this purpose, I wrote the package useAppState. helloncanella/useAppState *Control the whole app’s state with the ease of a useState. *github.com
With it, you can modify a cached state to, for example, open and close a floating menu.
We have above two isolated components that share the same state isOpen. At the same time, the hook provides a setter that allows the change of this value.
<iframe src="https://medium.com/media/893de8c8c12286ce2c48c1e683c48642" frameborder=0></iframe>You may assign variables to your queries as follows:
We can illustrate this with an example involving two counters:
<iframe src="https://medium.com/media/efec761fc3ecf2154605fae1105d4b55" frameborder=0></iframe>The components of this example are structured as follows.
Internally, the way the display Counter to and its controller button AddOneButton are organized is shown below:
The hook useCount encapsulates the behavior of our components as well as the details of interacting with our package, as detailed below:
Note the use of variables in the call of useAppState. It is precisely the assignment of different values to label that gives independence to the states of the counters A and B.
Updating queries without @client
Although the above examples focus on updating queries with the @client directive*, useAppState can be used to update any cached data.*
Any list fetched from the server could be updated locally like this.
Internally, useAppState uses the hook useQuery, launched in August 2019, to reactively access the state of the query. At the same time, a call to client.writeQuery is encapsulated by its setter*.*
The elaboration of this hook involved approximately 40 lines and is available at the link.
I hope this little utility allows you to write a little less :)