Building a Robust API Layer – `api-def` Package Integration with React (NextJs) app

This content originally appeared on DEV Community and was authored by Santhanam Elumalai

Welcome back! In this part, we'll demonstrate how to integrate the api-def package with a Next.js application for client-side and server-side API fetching using Tanstack Query.

Recap:

We explored the concept and implementation of the api-def package.

Integration with Tanstack Query:

Configure Tanstack Client:
- Create a Providers component to manage the QueryClient instance.
- Use isServer from @tanstack/react-query to create separate clients for server and client.

  import { QueryClient, QueryClientProvider, isServer } from "@tanstack/react-query";

  function makeQueryClient() {
      return new QueryClient({
          defaultOptions: {
              queries: {
                  staleTime: 60 * 1000, // Cache timeout in milliseconds
              },
          },
      });
  }

  let browserQueryClient: QueryClient | undefined = undefined;

  function getQueryClient() {
      if (isServer) {
          return makeQueryClient();
      } else {
          if (!browserQueryClient) {
              browserQueryClient = makeQueryClient();
          }
          return browserQueryClient;
      }
  }

  export function Providers({ children }: { children: React.Node }) {
      const queryClient = getQueryClient();
      return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
  }

Provider Placement:
- Wrap your application with the Providers component at the root level (e.g., in layout.tsx) to make the QueryClient context globally accessible.

  import { Providers } from "./providers";

  export default function RootLayout({ children }: { children: React.Node }) {
      return (
          <html lang="en">
              <body>
                  <Providers>{children}</Providers>
              </body>
          </html>
      );
  }

Client-Side Fetching:
- Create a component (e.g., Users component) that utilizes the useQuery hook from Tanstack Query.
- Use the GetUserKeys function from api-def to define the query key for caching and invalidation.
- Use the ApiClient from api-def within the queryFn to fetch data from the API.

  import { GetUserKeys, ApiClient } from "@repo/api-definitions";
  import { useQuery } from "@tanstack/react-query";

  export function Users() {
      const { data } = useQuery({
          queryKey: GetUserKeys.getUsers({}),
          queryFn: async ({ queryKey }) => {
              const queries = queryKey[0]?.requestBody;
              return ApiClient.getUsers(queries || {});
          },
      });

      return <>{JSON.stringify(data)}</>;
  }

Server-Side Prefetching:
- Within a server component (e.g., in page.tsx), prefetch the data using queryClient.prefetchQuery before rendering the component.
- Use the same GetUserKeys and ApiClient from api-def within the queryFn for consistency.
- Wrap the component with a HydrationBoundary from Tanstack Query to hydrate the prefetched data on the client.

  import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
  import { GetUserKeys, ApiClient } from "@repo/api-definitions";
  import { Users } from "@app/user/users";

  export default async function PostsPage() {
      const queryClient = new QueryClient();
      await queryClient.prefetchQuery({
          queryKey: GetUserKeys.getUsers({}),
          queryFn: ({ queryKey: [requestBody] }) => {
              return ApiClient.getUsers(requestBody?.requestBody || {});
          },
      });
      return (
          <HydrationBoundary state={dehydrate(queryClient)}>
              <Users />
          </HydrationBoundary>
      );
  }

Benefits:

Type safety: Zod ensures type safety throughout the API interactions.
Centralized definitions: api-def offers a single source for API definitions and endpoints.
Efficient caching: Tanstack Query manages caching and invalidation for optimized performance.

Next Steps:

In the upcoming post, we'll delve into the integration of another powerful tool: React Hook Form. This library will help us streamline form handling, validation, and submission processes within our React applications.

Stay tuned!

Github PR Location

Footnote: This implementation is inspired by the Tanstack Query documentation on Advanced Server-Side Rendering: Advanced Server Rendering

This content originally appeared on DEV Community and was authored by Santhanam Elumalai

Print Share Comment Cite Upload Translate Updates

APA

Santhanam Elumalai | Sciencx (2024-09-28T23:26:21+00:00) Building a Robust API Layer – `api-def` Package Integration with React (NextJs) app. Retrieved from https://www.scien.cx/2024/09/28/building-a-robust-api-layer-api-def-package-integration-with-react-nextjs-app/

MLA

" » Building a Robust API Layer – `api-def` Package Integration with React (NextJs) app." Santhanam Elumalai | Sciencx - Saturday September 28, 2024, https://www.scien.cx/2024/09/28/building-a-robust-api-layer-api-def-package-integration-with-react-nextjs-app/

HARVARD

Santhanam Elumalai | Sciencx Saturday September 28, 2024 » Building a Robust API Layer – `api-def` Package Integration with React (NextJs) app., viewed ,<https://www.scien.cx/2024/09/28/building-a-robust-api-layer-api-def-package-integration-with-react-nextjs-app/>

VANCOUVER

Santhanam Elumalai | Sciencx - » Building a Robust API Layer – `api-def` Package Integration with React (NextJs) app. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/28/building-a-robust-api-layer-api-def-package-integration-with-react-nextjs-app/

CHICAGO

" » Building a Robust API Layer – `api-def` Package Integration with React (NextJs) app." Santhanam Elumalai | Sciencx - Accessed . https://www.scien.cx/2024/09/28/building-a-robust-api-layer-api-def-package-integration-with-react-nextjs-app/

IEEE

" » Building a Robust API Layer – `api-def` Package Integration with React (NextJs) app." Santhanam Elumalai | Sciencx [Online]. Available: https://www.scien.cx/2024/09/28/building-a-robust-api-layer-api-def-package-integration-with-react-nextjs-app/. [Accessed: ]

rf:citation

» Building a Robust API Layer – `api-def` Package Integration with React (NextJs) app | Santhanam Elumalai | Sciencx | https://www.scien.cx/2024/09/28/building-a-robust-api-layer-api-def-package-integration-with-react-nextjs-app/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts