solution for typed data-fetching using tanstack/query

Installation

Yarn

yarn add @front.zen/data-service

Npm

npm install @front.zen/data-service

Introduction

Warning The concepts that you should know:

1. Default Query Function

   you can just share the same query function for your entire app and just use query keys to identify what it should fetch.

   used in: (client-config.ts)

   more : https://tanstack.com/query/v4/docs/react/guides/default-query-function

2. Client Service Adaptor

   ‌By default this package use Axios library for initializing client service, but you can change it to your custom.

   used in: (adapters/init-axios.ts)

3. Functions

   1. createService(base:string , method:MethodType) => Service

   • base: Base url , Example : /api/products and this url may have 3 sub products 'get' , 'get_all' , 'new' .

     and then after give base you should just use that sub products as endpoint :)

   • method : Example: "get"

   2. queryKeyGen(service: AnyService , ...parameters: FullParameter<AnyService> ) => [service , parameters]

   • service: the service was generated by createService Function

   • parameters : Example: [{ id: '' }, { query: { a: '' }, body: {} }]

     • template parameters of service path // will be omitted if no param needed.

     • adapter input will be passed to adapter function

How to use

1. At first initiate the client adaptor (default axios) and pass your axios instance to it in top level of your react tree , Then configure query Client instance like this:

import { initAxiosAdapter, queryClientConfig } from '@front.zen/data-service';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

initAxiosAdapter(yourApiClient);

const client = new QueryClient(queryClientConfig);

const App = ({ children }) => {
  return (
    // Provide the client to your App
    <QueryClientProvider client={client}>{children}</QueryClientProvider>
  );
};

2. data fetching example with useQueryService :

import { createQueryService, useQueryService } from '@front.zen/data-service';

interface IQueryParams = { isSold: boolean };


const getProductsService = createQueryService<ResponseData , { query: IQueryParams; body: BodyInput }>('', 'get')('/products/{id}');

const ProductsList = () => {
  const { data } = useQueryService(
    getProductsService,
    [{ id: '1' /* id parametr in getProductsService */ }, { query: { isSold: true } }],
    { enabled: false },
  );

  return <ListMap data={data} />;
};

export default ProductsList;

3. mutating data with useMutationService :

import { createMutationService, useMutationService } from '@front.zen/data-service';

interface RequestBody {
  title: string;
  price: string;
}

const addProduct = createMutationService<Product, RequestBody>('', 'post')('/products/add');

const AddNewProduct = () => {
  const { mutate } = useMutationService(addProduct);

  const handleAddPost = () => {
    mutate([{ title: 'Laptop', price: '100000000' }]);
  };

  return <button onClick={handleAddPost}>create New Post</button>;
};

export default AddNewProduct;