I recently came across Apollo in Wes Bos's advanced react tutorial. I loved the single hook + caching mechanism. I also like graphql but I have a project that is not using graphql. Are there any packages out there that have a single hook that returns data, error, and loading like the useQuery hook in Apollo? I found this really slick and useful and would like to have something like this in other projects when dealing with REST APIs.
If you want to convert your Rest API to graphql, checkout the datasource section in the apollo server documentation.
https://www.apollographql.com/docs/apollo-server/data/data-sources/
still If you want to use Rest API, Checkout the react-query library.
https://react-query.tanstack.com/
It does caching and queries similar to apollo graphql and also has many more feature.
Related
I'm new in this field. I'm very confused and need help.
How can I perform all GraphQL queries and mutations via Redux Toolkit?
(I should use the mutation only to get the token information while the user is logging in.)
While doing these, I need to use client.mutate / client.query instead of useQuery and useMutation, but I couldn't find any examples anywhere.
If you already use Apollo, you should not be using Redux Toolkit for api requests on to of that. Apollo is already a full-fledged api client & cache. You don't need to add a hand-written cache layer on top of that.
In this case you can still use Redux to manage non-api application state, but don't use it to do Apollo's job.
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 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
I am starting a new project from scratch and I decided to use Django with React. But when I say react there are many developers who use redux as an essential library for state management but I think redux adds a lot of complexity in code. So I searched an alternative for this and I found some developers are not using redux at all instead they are using GraphQL + Apollo as an alternative. And I found this beautiful repository as well on Github that uses the Django with React but this is not using redux at all.
Link to a package.json file of that GitHub repository - https://github.com/mirumee/saleor-dashboard/blob/0d9f8662299a98de4c89bbdf5b8142a0e1790bc7/package.json
So, Is this a good idea of using Apollo + GraphQL instead of redux?
I think there is a big difference between Redux & Apollo + GraphQL. First Apollo + GraphQL is not a state management tool, it's a way to get data from API. In my opinion, the not complex replacement for Redux as a state manager might be to use a built-in API called Context. Check this link to get started: Context - React
I am doing a sample project with aws Appsync and ReactJs and my mutations are working fine. But I need a way to do the subscription part without using react-apollo. As far as I know Appsync is built based on apollo. So I believe there should be a way to do it purely with Appsync, by passing apollo.
I need some suggestions from expertise. Thanks in advance,
I tried with apoollo. But I need to do with minimum dependencies.
You can use the Amplify client https://aws-amplify.github.io/docs/js/api#amplify-graphql-client
I tried with apoollo. But I need to do with minimum dependencies.
You will always need a dependency since you will need a GraphQL client.
Here are some GraphQL clients that supports subscription aside from Apollo:
Relay
Amplify API
Since subscriptions are using web sockets under the hood, you can make use of Redux Saga's event channel.