React with Redux Vs React with Apollo Server
What is Apollo server
Apollo Server is an extensible, open-source JavaScript GraphQL server which helps to build up a data graph: a unified data layer that can be permit the applications to interact with data from any combinations of connected data stores and external APIs.
Mainly the Apollo server handle's the responsibility to build up a data graph, sits between the client and the server.
React with Redux vs React with Apollo server
Well the first question that come to your head is how we going to compare an client side state management library with server side query language.
When you building the client with using React Redux you need to define a global Redux store to access data for the client application. More over you need to handles the each and every actions in the reducer for related scenarios.
A simple login scenario which has following actions in the client in order to handle the client data flow properly.
- loginUser
- loginUserSuccess
- loginUserError
- loginUserReset
Handling the client–server memory is a important thing to give a better experience to the user who is using the application. In the point of view of memory consumption in the client-server we need to reset the related store after the success or error.
when using Apollo server with GraphQL you can delete a huge amount of code that is related to state management code in your client-server. Apollo server can handle all the related actions ( reducers , selectors , actions etc.) and the side effects (sagas). And the client-server can control the exact shape of the state which it needs from the server and it can obtain all the needed data from single request.
For the login scenario Apollo server can handling the related states and access it by using useLazyQuery .It’s shown in the below example.
const query = gql`
quary loginUser($email: String!, $password: String!) {
loginUser( email: $email, password: $password){
success
token
user{
id
userName
}
}
}`;export default () => { const [loginQuery, { error, loading, data }] = useLazyQuery(query);
}
By the form submission an user can get the data/state related to the query. It’s shown in the below example.
// import the related query or miutaion
import loginQuery from 'src/graphql/mutation/loginQuery';//accessing the related data or sending the
const [login, { error, data, loading }] = loginQuery();useEffect(() => {
if (data) {
// render the related logic or navigate the user to the inner pages
}
if (error) {
// render the related error view to the dom.
}
if (loading) {
// when the state is in loading return a loading component to the view.
} }, [data, error, loading ]);return(
<div className="inner-main login">
<div className="card">
<div className="card-body">
<Formik
initialValues={{
email: '',
password: ''
}}
validationSchema={Yup.object().shape({
email: Yup.string()
.email('Must be a valid email')
.max(255)
.required('Email is required'),
password: Yup.string()
.max(255)
.required('Password is required')
})}
onSubmit={value => {
login( {variables:{ ...value }});
}}
>
{({
errors,
handleBlur,
handleChange,
handleSubmit,touched,
values
}) => (
<form onSubmit={handleSubmit}>
<div>
<label className="lang-eng"> User Name </label>
<div className="input-group">
<input
type="email"
id="email"
name="email"
onChange={handleChange}
value={values.email}
/>
<small className="form-text text-danger">
{touched.password && errors.password}
</small>
</div>
<div>
<label className="lang-eng ">
{signInFromLanguage[languageType - 1].password}
</label>
<div className="input-group">
<input
type={showPassword}
className="form-control form-control-sm "
id="password"
name="password"
onChange={handleChange}
value={values.password}
/>
<div className="input-group-prepend">
<span className="input-group-text"><PasswordShow showHide={showHide} isShow={showPassword} /></span>
</div>
</div>
<small className="form-text text-danger">
{touched.password && errors.password}
</small>
</div>
<div id="signInSaveBtns">
<button
type="submit"
className="btn lang-eng"
style={{
padding: "5px 10px",
borderRadius: "3px",
marginTop: "5px",
fontSize: "12px",
}}
>
Sign In
</button>
</div>
</form>
)}
</Formik>
</div>
</div>
</div>)
when the form summited the related data are pass to the Apollo server as variables which are email and password. Inside the component user can handle the view according to the provided data or error state or loading state.
More over Apollo server stores the results of the GraphQL queries in a normalized, in-memory cache. Unnecessary network requests are not proceed for the future queries for the same exact data required from the client.
The cache behavior is depend on the application and the scalability of the application and user can define the cache behavior by using options object to the InMemoryCache constructor when user initialize an ApolloClient instance in the client.
Conclusion
when using Apollo GraphQL sever instead of REST it will rid off a complexity of the client side state management and the related client side code is more optimized and also it is responsible to render the data in the UI.
Redux state management library is stable library which can be used to manage state of the application.
Apollo server will rid of the complexity in the state management which makes work load easy.
References
to see the cache options : https://www.apollographql.com/docs/react/caching/cache-configuration/
