It opinions based questions .
Need one suggestion.
In Reactjs, is it right approach to use redux for state management and for API call use Apollo + GraphQL?
You have to distinguish between view state (e.g. search field, popup, toggle) and data state (e.g. remote API). Whereas Apollo is mainly used for data state, Redux/MobX/React's Local State are used for view state when used in combination with Apollo Client. If not used with Apollo Client, these solutions can be used for the remote data state too. However, Apollo Client introduced apollo-link-state which can be used for the local view state too.
If your application is purely remote data driven and uses a GraphQL backend, Apollo Client can be sufficient for your application.
If you have a few view states in your application, mix in React's local state management.
If you have several to a lot of view states, use Redux or MobX for your view state or try out apollo-link-state.
That's certainly possible and the natural thing to do. We use this same setup and we found we don't have to use Redux very much anymore.
We used to use Redux to store our API responses (the data) as well, but now Apollo manages that for us.
So our Redux store is now only used for the actual UI state (e.g. routing state, user preferences for certain views, whether something is enabled or not etc).
All data is now retrieved by Apollo and kept in its own internal Redux store, which it uses as a cache. This works great and nicely separates UI state from data state.
I suggest Apollo GraphQl because it has many benefits:
Eliminate Boilerplate
No more action creators, async handling, and request waterfalls. Just ask for the data you need with a GraphQL query, and it shows up.
Validation across the stack
Identify breaking changes in your API before they are deployed, and statically validate data fetching across all of your frontends.
Understand API usage
Learn how your backends are being used with field-by-field granularity. Find and address performance hotspots easily.
Pull complexity out of the client
Put computed fields, data transformations, and security logic into your API so your frontends don't have to reimplement them every time.
Incrementally evolve your API
Add fields to GraphQL as you go and deprecate old fields when you no longer need them. Mock some or all of your API and build the frontend in parallel.
Improve performance
Fetch exactly the data you need, no more and no less. Improve performance with GraphQL-specific caching and optimizations across the stack.
For more Information Read GrapQl Apollo Doc
https://www.apollographql.com/docs/
Related
What can Redux Toolkit do, or do well in that RTK Query can't? I know that RTQ Query makes it easier to perform data fetching and caching with less code, but why do some projects that has Node.js and MongoDB as backend uses createAsyncThunk() from Redux Toolkit instead of createApi() from RTQ Query?
They are totally different things.
RTK Query is an optional addon included in the Redux Toolkit package. There are also alternative packages such as react-query, swr, See Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router. I think the RTK Query Overview documentation is clear enough.
Why do people(including me) use createAsyncThunk() in their projects may be because RTK Query has a learning cost and they want to keep their project simple and don't want to include too many packages and conceptions.
I write the logic about the data fetching and caching by myself instead of RTK query
RTK provides some APIs to help people address three common concerns about Redux:
"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"
In particular, RTK uses immer underly, which greatly reduces the complexity of updating complex states and returning new references.
Internally, createApi will call the Redux Toolkit createSlice API to
generate a slice reducer and corresponding action creators with the
appropriate logic for caching fetched data. It also automatically
generates a custom Redux middleware that manages subscription counts
and cache lifetimes.
with createApi we create an api (this is not a backend code) and we get hooks (it also returns slice and thunks) from that api. Hooks automate the data fetching process. Basically, an api talks to one server so keeping all fetching logic in one function will keep your app neat. (But we need to do alot of configuration) All the endpoints will be in one spot so you see everything in one look. (compare it to node.js api logic, creating controllers in different files, how hard it is keep tracking of api requests) The communication (automated refetching, invalidating cache) between those fetchers is perfectly done under createApi.
with react toolkit query we are not only handling state management but also handling data fetching and caching, efficiently. If two components on a single page are making a network call to the same endpoint defined in RTK Query, it detects that and makes one single call instead. On the other hand, Redux toolkit is the same as react-redux but the only difference is redux toolkit (with using immer.js behind the scene) makes it write the same logic shorter and more secure.
Basically, react toolkit query is built on top of the redux toolkit. The logic is defining the data fetching first and then generating all the slice logic, reducers, middlewares, isLoading state based on those data fetching functions.
Comparison | React Query vs SWR vs Apollo vs RTK Query vs React Router
this link will show all the properties of the RTK Query
I'm currently using React (with hooks) and Redux-Toolkit. After reading through the docs, I've come across Redux Thunks, createAsyncThunk, and RTK Query. Out of these three methods, which is the best for fetching data in a Redux slice, modifying that data within the slice, and then dispatching said data to a React?
Thanks in advance for your answers!
Each of them serves its own purpose, and only RTK-Q is made exactly for data fetching and caching.
The "problem" is that it's
Not really integrated with the application store's Redux and Thunks by default - it "lives" in its own store, with its own cache state, actions, and middleware.
The idea is that you don't want to put fetched data in your app-store, course, it will just duplicate the data and add another "source of truth" with the following inconsistency.
RKT-Q adds a concept of "API state", which represents the data on the backend, and should be handled significantly differently than App's (frontend) state.
In extra cases, you may handle the RTK-Q-related actions, handle them in your middleware (Thunks in your case) and update your Redux app-state producing actions with some calculated data\flags, etc.
Not covering all the cases of Application <-> API negotiation.
As an example - file\data export, API action calls, and other stuff that is out of RESTfull architecture. If you'll try to download a file from API via RTK-Q you'll find how bad it's covering such a case, and you'll be forced to use separate flow via Thunks\Sagas or\with plain fetch API to do so.
But still, RTK-Q brings you so much out of the box, so it is worth using it by default for data fetching, even with some work to handle several edge cases.
Wrapping up - I believe that there is no right\complete answer to your question and just more things to consider for your own app architecture design.
I'm new in Next.js and GraphQL world. So far i've been using react with reduxjs and axios for API calls. I would learn more advanced stuff so here is my question. If i'm using apollo graphql what options do i have for local state management? It can be handled by apollo itself or i should use external tool like redux store?
Apollo at its heart is a GraphQL implementation that helps people manage their data. They also make and maintain a GraphQL client (Apollo Client) which we can use with React frameworks like Next.js.
The Apollo Client is a state management client that allows you to manage both local and remote data with GraphQL and you can use it to fetch, cache, and modify application data.
In this article, we’ll discuss why we should use the Apollo Client with Next.js and how we can use the Apollo Client with Next.js to render pages via the three rendering methods Next.js supports; static site generation (SSG), server-side rendering (SSR), and client-side rendering (CSR).
If you want to use your Redux and Apollo state in a component, you need to use both graphql from react-apollo and connect from react-redux. This will let you better track the different events that happen in your app, and how your client and server side data changes interleave.
Why use Apollo Client with Next.js
First, let’s look at why we should use the Apollo Client with Next.js. There are three key reasons to use the Apollo Client:
Out-of-the-box support for caching
Built-in loading and error states
Declarative approach to data fetching
Out-of-the-box support for caching
In Apollo’s own words, “Caching a graph is no easy task, but we’ve spent two years focused on solving it.”
Apollo has invested serious amounts of time in making their caching process the most efficient and effective they can. So, why try and reinvent the wheel? If you’re fetching data in your application and working with GraphQL, then the Apollo Client is a great way of handling your data.
Another benefit is that there is minimal setup required for developers using the client. Apollo even labels it as “zero-config.” We will see this in our application example further in the post, but to set up caching in an application, all we need to do is add the code below to our application:
import { ApolloClient, InMemoryCache } from '#apollo/client';
const client = new ApolloClient({
cache: new InMemoryCache()
})
Built-in loading and error states
The Apollo Client has a custom React Hook built into it called block useQuery, which we will use in our example application, and gives us built-in loading and error states for us to use.
While this doesn’t sound impressive, what it means for developers is that we don’t need to spend time implementing this logic ourselves, we can just take the booleans the Hook returns and change our application rendering as required.
Thanks to these built-in states, using the Apollo Client means we can spend less time worrying about implementing data fetching logic and focus on building our application.
Declarative approach to data fetching
Another benefit of the way the Apollo Client implements the useQuery Hook is that data fetching with the Apollo Client is declarative rather than imperative.
What this means for us is we only need to tell Apollo what data we want and it gets it for us. We don’t need to write the logic and give it a list of step-by-step instructions on how to do it or handle it.
Once again, this is another great example of how the Apollo Client helps speed up development and make us more efficient developers when working with GraphQL.
You can learn more in this page right here if why use nextjs with apollo: This link
By default, Apollo Client creates its own internal Redux store to manage queries and their results. If you are already using Redux for the rest of your app, you can have the client integrate with your existing store instead.
In simple words, When you're using Apollo, you shouldn't be putting that data into Redux. You can still use Redux for other things, but apollo's duty is to store that data and make it accessible to your components. Taking it out and putting it into Redux means doing double the work for no added gain, and there's a strong risk you'll introduce a lot of asynchrony between the two levels as a result.
Referenced from here:
enter link description here
And learn more if u want to integrate redux and apollo from here: enter link description here
Learn more if it is necessary to use redux with apollo right here as well: enter link description here
currently I am using redux in different projects for state management. A few days back, I listened about react-query which is also used for state management and provides caching and async fetching. I am trying to figure out the main difference between these two libraries.
Where I should use react-query and in which cases I need redux.
React-query is what you would call a specialized library. It holds an api cache for you - nothing else. And since it is specialized, it does that job quite well and requires less code.
Redux on the other hand gives you tools to just about store anything - but you have to write the logic. So you can do a lot more in Redux, but you'll have to potentialy write code that would not be necessary with a specialized library.
You can use them both side-by-side: api cache in react query, rest of your global state in Redux.
That said, the official Redux Toolkit also ships with an api cache abstraction RTK Query since version 1.6 with a similar feature set as React Query, but some different concepts overall - you might also want to check that out.
react-query is designed to deal with data that is stored on a remote server. To access this data, your app needs to use asynchronous requests. This is where you probably want to deal with caching, loading state, network failures, etc.
That is where react-query shines.
Redux on the other ends deals with data on the client-side. For example the content of a text input or the state of a modal. You don't need to deal with network-related issues. But you do need to deal with complex sequences of causes and effects.
That is where redux shines
Redux and react-query are 2 very different things: react-query is used for data synchronization, Redux is a global state manager. react-query is used to keep synch all your apps to the same db, Redux is used to share a part of the app state to all the components that need to read that state.
An example: I have an app to chat with other users. With react-query I keep all the apps synch with all the messages users received, then I store the messages in Redux in order to have messages on chat page and on history chat page.
React Query manages Server State. Its main function is to handle functions between Server and client.
Redux handles client-state. Redux can be used to store asynchronously Data.
So, they have their unique role at different levels and both can be used side by side.
React-Query = server state library(save/cache api response)
Redux = client state library(globally accessible client state
should be stored).
We should distinguish between two kind of states, client state & server (or remote) state:
client state contains:
locally created data that has not yet been persisted to the server.
UI state that handles active routes, selected tabs, spinners, pagination controls, and so on.
server state is everything related to:
data persisted remotely that requires asynchronous APIs for fetching and updating
When it comes to client state, Redux is a grate management tool for managing application’s state.
On the other side, to manage server state, we can use regular state management tools but they are not so great at working with async or server state. So, to resolve this, we use React Query. As described on their documentation, React query is a great tool for:
Caching... (possibly the hardest thing to do in programming)
Deduping multiple requests for the same data into a single request
Updating "out of date" data in the background
Knowing when data is "out of date"
Reflecting updates to data as quickly as possible
Performance optimizations like pagination and lazy loading data
Managing memory and garbage collection of server state
Memoizing query results with structural sharing
You can simply to think:
React Query = axios + cache logic
Redux can store synchronized data and asynchronized data
By the way, I use context manage synchronized state, React Query manage asynchronized state now.
I'm wondering what the difference is between redux or context or any kind of application state storage versus client side caching, with the specific example being Apollo's client side cache.
I generally understand from this answer that application state storage, such as redux or context, is a form of caching, and what it does is cache, or in this case, "store", information in RAM. What makes something like Apollo's client cache different? Is it the same and just storing the data like you would with redux, or is it doing something different? Thanks.
Apollo or server state libraries like React-Query provide tools to fetch data from a server and store results in client memory, like you would do with Redux or Context (or simply in a component state).
But they also provide tools to do more sophisticated caching to provide a smooth user experience and bandwith optimization :
allowing you to set caching strategies per request,
define caching durations,
invalidate cache entries when needed (for example after a mutation, when server data changed)
define a retry strategy on error,
manage periodic refreshes on background,
...
These tools are designed to handle server state in your UI app in an efficient manner. This involves storing data, but this is only the first (and easy) step for a decent HTTP caching tool.
EDIT from phry comment
More than a way to store data, Redux is a javascript Flux implementation, which is a design pattern for shared UI state management. Event though you can implement a HTTP cache with Redux, this is not its primary goal (and obviously you would have to implement the cache logic which is not a trivial task). On the other hand, React-Query, SWR or Apollo are caching tools.