Perform Graphql Mutation And Query On The Same Screen/Page

GraqhQL has been an amazing technology provided by Facebook. It simplifies the client consumption of information provided by the server in an incredible way. GraphQL gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

We at Herlabytes has adopted the cutting-edge technology and implementing it into all of our mobile application, web application, personal website and also our server deployment. This has really enable us to deliver our services on time and also satisfy our customers’ demand.

Recently, we were working on an enterprise mobile application for a client and there is need to perform a query (fetch data from the server) on screen (mobile application screen) and also to perform another mutation (modify information on the server) operation on the same screen. For example, fetch all users form the server and update their registration/administration status.

I was confused on how to accomplish the feature with what I’ve known about GraphQL and the information on their documentation. I’ve not seen anywhere in the documentation where they combine mutation and query operation together. The only example I can find is about multiple query operation which is not the operation I want to implement. I checked everywhere on the internet for resource but can’t find much information about it.

Finally, I take up the challenge to combine the Apollo GraphQL Higher Order Component (HOC) and the new Query Component provided by the Apollo GraphQL Version 2.1 release to implement that feature. To my ultimate surprise. It works! 😀

Here are the steps I followed to make it work perfectly as I wanted.

Implement The Query Operation With The New Query Component From Apollo

Use the Query Component from Apollo GraphQL to create a query operation and display the information on the page. This is similar to using the Higher Order Component. Just that the Query Component make it easier to reason about. The code below shows how to go about it.

// other import
import {Query} from “Apollo-graphql”; // new Query Component
import gql from "graphql-tag";
import UserComponent from '../component/UserComponent'; // any component to display query result
const GET_ALL_USER = gql`
{
allUsers: {
firstname,
lastname,
username,
# other information
}
}
`
ExampleComponent extends React.Component{
onEditInformation = async (user) => {
const response = await mutate({
variables: {userID: user}
})
}
render(){
return(

{({data: { allUsers }}) => {
return allusers.map(user => {
return (
user={user}
/>
)
})
}}

)
}
}
export default ExampleComponent;

The code queries all user information and use the arbitrary UserComponent to display the information. If you got this working, let go to the next and the final step to get this working.

Use Higher Order Component(HOC) For Mutation

Use the Apollo Higher Order Component to share mutate props into the component while executing your mutation operation. This will give you access to the mutate function which can be used to mutate information on the server. Mutate function can also accepts variables which let the server know what information to mutate and modify. Example of such code is shown below.

// other import
import {Query} from “Apollo-graphql”; // new Query Component
import gql from "graphql-tag";
import { graphql } from "react-apollo";
import UserComponent from '../component/UserComponent'; // any component to display query result
const GET_ALL_USER = gql`
{
allUsers: {
firstname,
lastname,
username,
# other information
}
}
`
const UPDATE_USER_STATUS = gql`
mutation UpdateUserStatus($userID: ID!, $status: Int!){
updateUserState(userID: $userID, status: $status){
firstname,
lastname
username
# other information
}
}
`
ExampleComponent extends React.Component{
onEditInformation = async (user) => {
const response = await mutate({
variables: {userID: user}
})
}
render(){
return(

{({data: { allUsers }}) => {
return allusers.map(user => {
return (
user={user}
onEdit={() => this.onEditInformation(user)}
/>
)
})
}}

)
}
}
export default graphql(UPDATE_USER_STATUS)(ExampleComponent);

In the code above, UPDATE_USER_STATUS Mutation is created and wrapped in the HOC to share mutate props to the component. The mutate function is used to perform mutation on the server, sending the user ID alongside to the server. The server will use this variable to modify the appropriate entity in the database.

Bonus: Reason For Using HOC And Not Mutation Component

Mutation Component would have been the right tool for this feature. Moreover, we are using the Query counterpart for the querying operation. But the big catch here is that, Mutation Component executes its operation immediately the component mounts.

This strategy wouldn’t work for the intended purpose, because we don’t want to mutate information when the page mounts (e.g. update the user status from unverified to verified) but only when the user click on the button to perform the action. This is the big reason I don’t use the Mutation Component to perform this feature.

Although, there is another ApolloConsumer Component from Apollo GraphQL. The component can be used to delay the action of the mutation operation. This can also be used to accomplish the same objective but I don’t want to dabble into that because the Higher Order Component strategy works fine and without introducing much unnecessary complexity.

CONCLUSION

By now, the mutation and query operation should be working as expected. Though there are other ways of doing this. This is a way I found very convenient and interesting to implement the feature. It is working fine for me and the project we are working on.

I’ll like to have your comment about the implementation. What do you think can be added alongside the solution? If you have a better and performant way to achieve this feature, you can also submit a comment, so others can learn from it.

Thanks

“Perform Graphql Mutation And Query On The Same Screen/Page” Posted first on ” JavaScript on Medium “
Author: Obagunwa Emmanuel Adeniyi

Author: Pawan Kumar

Leave a Reply

Close Menu
%d bloggers like this:
Skip to toolbar