feat(network): add query factory library

Author: juanchoperezj

package.json

@@ -58,6 +58,7 @@
     "@expo/metro-runtime": "^3.2.3",
     "@gorhom/bottom-sheet": "4.6.3",
     "@hookform/resolvers": "^3.9.0",
+    "@lukemorales/query-key-factory": "^1.3.4",
     "@shopify/flash-list": "1.6.4",
     "@tanstack/react-query": "^5.52.1",
     "app-icon-badge": "^0.0.15",

pnpm-lock.yaml

@@ -0,0 +1,33 @@
+import { createMutation } from 'react-query-kit';
+
+import { client } from '../common';
+
+type Variables = {
+  username: string;
+  password: string;
+  expiresInMins?: number;
+};
+
+type Response = {
+  id: number;
+  username: string;
+  email: string;
+  accessToken: string;
+  refreshToken: string;
+};
+
+const login = async (variables: Variables) => {
+  const { data } = await client({
+    url: 'auth/login',
+    method: 'POST',
+    data: variables,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return data;
+};
+
+export const useLogin = createMutation<Response, Variables, Error>({
+  mutationFn: (variables) => login(variables),
+});

src/api/auth/use-login.ts

@@ -0,0 +1,6 @@
+import { createQueryKeys } from '@lukemorales/query-key-factory';
+
+export const cartKeys = createQueryKeys('carts', {
+  list: (filters) => ['carts', filters],
+  detail: (id) => [id],
+});

src/api/carts/query-keys.ts

@@ -0,0 +1,19 @@
+export type Product = {
+  id: number;
+  title: string;
+  price: number;
+  quantity: number;
+  total: number;
+  discountPercentage: number;
+  discountedTotal: number;
+  thumbnail: string;
+};
+export type Cart = {
+  id: number;
+  products: Product[];
+  total: number;
+  discountedTotal: number;
+  userId: number;
+  totalProducts: number;
+  totalQuantity: number;
+};

src/api/carts/types.ts

@@ -0,0 +1,35 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { client } from '../common';
+import { cartKeys } from './query-keys';
+
+type Variables = {
+  limit?: number | string;
+  offset?: number | string;
+};
+
+const DEFAULT_LIMIT = 10;
+const DEFAULT_OFFSET = 0;
+
+const getCarts = async ({
+  limit = DEFAULT_LIMIT,
+  offset = DEFAULT_OFFSET,
+}: Variables) => {
+  const params = new URLSearchParams({
+    limit: limit.toString(),
+    offset: offset.toString(),
+  }).toString();
+  const { data } = await client.get(`carts?${params}`);
+  return { data, offset: Number(offset), limit: Number(limit) };
+};
+
+export const useCarts = (variables: Variables) =>
+  useInfiniteQuery({
+    ...cartKeys.list(variables),
+    queryFn: () => getCarts(variables),
+    initialPageParam: { offset: DEFAULT_OFFSET, limit: DEFAULT_LIMIT },
+    getNextPageParam: (lastPage) => {
+      const { offset, limit } = lastPage;
+      return { offset: offset + limit, limit };
+    },
+  });

src/api/carts/use-carts.ts

@@ -1,13 +1,19 @@
 import type { AxiosError, InternalAxiosRequestConfig } from 'axios';
 
+import { useAuth } from '@/core';
+
 import { client } from './client';
 import { toCamelCase, toSnakeCase } from './utils';
 
 export default function interceptors() {
+  const token = useAuth.getState().token;
   client.interceptors.request.use((config: InternalAxiosRequestConfig) => {
     if (config.data) {
       config.data = toSnakeCase(config.data);
     }
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
     return config;
   });
 
@@ -16,6 +22,6 @@ export default function interceptors() {
       response.data = toCamelCase(response.data);
       return response;
     },
-    (error: AxiosError) => Promise.reject(error)
+    (error: AxiosError) => Promise.reject(error),
   );
 }

src/api/common/interceptors.ts

@@ -4,3 +4,15 @@ export type Post = {
   title: string;
   body: string;
 };
+
+export type Comment = {
+  id: number;
+  body: string;
+  postId: number;
+  likes: number;
+  user: {
+    id: number;
+    username: string;
+    fullName: string;
+  };
+};

src/api/posts/types.ts

@@ -1,17 +1,22 @@
 import type { AxiosError } from 'axios';
+import axios from 'axios';
 import { createMutation } from 'react-query-kit';
 
-import { client } from '../common';
+import { Env } from '@/core/env';
+
 import type { Post } from './types';
 
 type Variables = { title: string; body: string; userId: number };
 type Response = Post;
 
 export const useAddPost = createMutation<Response, Variables, AxiosError>({
   mutationFn: async (variables) =>
-    client({
-      url: 'posts/add',
+    axios({
+      url: `${Env.API_URL}posts/add`,
       method: 'POST',
       data: variables,
+      headers: {
+        'Content-Type': 'application/json',
+      },
     }).then((response) => response.data),
 });

src/api/posts/use-add-post.ts

@@ -1,15 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
 import type { AxiosError } from 'axios';
 import { createQuery } from 'react-query-kit';
 
+import { queryFactory } from '@/api/query-factory';
+
 import { client } from '../common';
 import type { Post } from './types';
 
 type Variables = { id: string };
 type Response = Post;
 
 export const usePost = createQuery<Response, Variables, AxiosError>({
-  queryKey: ['posts'],
-  fetcher: (variables) => client
-      .get(`posts/${variables.id}`)
-      .then((response) => response.data),
+  // old queryKey: ['posts', 1],
+  // ...queryFactory.posts.get(1), // this translates to ['posts', 1]
+  ...queryFactory.posts.detail(1), // this translates to ['posts', 1]
+  fetcher: (variables) =>
+    client.get(`posts/${variables.id}`).then((response) => response.data),
 });
+
+export const usePostComments = (postId: number) =>
+  useQuery({
+    ...queryFactory.posts.detail(postId)._ctx.comments,
+    enabled: !!postId,
+  });