Tanstack is not a framework or a specific technology, it is a technique for data management in Next.Js and React-based applications. Tanstack is a combination of Typescript, Next.Js, and React. Its mainly helps to address the most common pain points such as data fetching, caching, synchronizing, and updating the server state also helps to build scalable and high-performance applications.
What is Tanstack Query?
Before looking at the Tanstack query we need to understand what is React Query, React Query is a javascript library designed to simplify complex tasks such as data fetching from the APIs and caching the data in the React-based applications.
React query offers some set of hooks to manage the data from various sources which includes REST APIs, GraphQL, and local states. Tanstack Query is one of the featured solutions to handle API requests, errors, and many more states, and the same as other features of the React Query but Tanstack is a combination of Next.js, React, and Typescript so we can use this on the server side call as well that is one of the main advantages of the while we using Tanstack Query.
To install the Tanstack query in your Next.js applications, use the below node command to install the Tanstack library
npmi@tanstack/react-query
Once the library is been installed in our application, create a provide and client to use the Tanstack query. In the _app.tsk file which is in the src/pages/_app.tsk file wraps the component with the query provider.
<I18nProviderlngDict={dictionary}locale={pageProps.locale}>
<ReduxStorestore={store}>
<PersistGateloading={null}persistor={persistor}>
<MantineProvidertheme={mantineTheme}>
<ModalsProvidermodals={modals}>
<QueryClientProviderclient={queryClient}>
<Component {…rest} />
</QueryClientProvider>
</ModalsProvider>
</MantineProvider>
</PersistGate>
</ReduxStore>
</I18nProvider>
Once the query client provider is been added to the base page you can start working on the Tanstack query in any of your components.
What is Query?
Tanstack query promotes a declarative dependency on the data fetching by using the unique key. Each query has to be declared with a unique key in the useQuery hook, the unique key is used internally for refetching and caching data from the API endpoints.
The query results returned by the useQueryhook contain a few important states which are isPending, isError, and isSucessalso there more information is available based on the query state if the query isErrorstate the error will be available on the error property likewise if the query isSucess state the data will be available on the data property.
https://gist.github.com/Vignesh-Jothikumar/295fc3ef3a9b5acd4ffc5387455af542
In the above sample Tanstack query implementation with Sitecore headless application, here I have used some Catfact fake api to populate the content on the screen, the same way we can use our APIs and define types to get the data from the endpoint.
Tanstack has some more features which we can see in the upcoming blog series. Please check out my GitHub for the complete source code…
