Merge pull request #33 from MattCCC/axios-update

Update typings and dependencies

.github/workflows/codeql-analysis.yml

@@ -2,12 +2,12 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ master ]
+    branches: [master]
   schedule:
-    - cron: '40 22 * * 0'
+    - cron: "40 22 * * 0"
 
 jobs:
   analyze:
@@ -21,40 +21,40 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ["javascript"]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v3
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
+
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
+
+      #- run: |
+      #   make bootstrap
+      #   make release
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3

.github/workflows/main.yml

@@ -7,8 +7,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ["16.x", "18.x", "20.x"]
-        os: [ubuntu-latest, windows-latest, macOS-latest]
+        node: ["18.x", "20.x", "22.x"]
+        os: [ubuntu-latest, macOS-latest]
 
     steps:
       - name: Checkout repo

README.md

@@ -67,28 +67,29 @@ yarn add axios axios-multi-api
 import axios from 'axios';
 import { createApiFetcher } from 'axios-multi-api';
 
-const api = createApiFetcher({
-  axios,
-  apiUrl: 'https://example.com/api',
-  endpoints: {
-    getUserDetails: {
-      method: 'get',
-      url: '/user-details',
-    },
-
-    // No need to specify method: 'get' for GET requests
-    getPosts: {
-      url: '/posts/:subject',
-    },
+const endpoints = {
+  getUserDetails: {
+    method: 'get',
+    url: '/user-details',
+  },
 
-    updateUserDetails: {
-      method: 'post',
-      url: '/user-details/update/:userId',
-    },
+  // No need to specify method: 'get' for GET requests
+  getPosts: {
+    url: '/posts/:subject',
+  },
 
-    // ...
-    // You can add many more endpoints & keep the codebase clean
+  updateUserDetails: {
+    method: 'post',
+    url: '/user-details/update/:userId',
   },
+
+  // ...
+};
+
+const api = createApiFetcher({
+  axios,
+  endpoints,
+  apiUrl: 'https://example.com/api',
   onError(error) {
     console.log('Request failed', error);
   },
@@ -106,7 +107,7 @@ const response = await api.getUserDetails({ userId: 1, ratings: [1, 2] });
 // GET to: http://example.com/api/posts/myTestSubject?additionalInfo=something
 const response = await api.getPosts(
   { additionalInfo: 'something' },
-  { subject: 'myTestSubject' }
+  { subject: 'myTestSubject' },
 );
 
 // Send POST request to update userId "1"
@@ -116,7 +117,7 @@ await api.updateUserDetails({ name: 'Mark' }, { userId: 1 });
 await api.updateUserDetails({ name: 'Mark', ratings: [1, 2] }, { userId: 1 });
 ```
 
-In the example above we fetch data from an API for user with an ID of 1. We also update user's name to Mark. If you prefer OOP you can import `ApiHandler` and initialize the handler using `new ApiHandler()` instead.
+In the example above we fetch data from an API for user with an ID of 1. We also update user's name to Mark. If you prefer OOP you can import `ApiHandler` and initialize the handler using `new ApiHandler()` instead. In case of using typings, due to magic methods being utilized, you may need to overwrite the type: `const api = new ApiHandler(config) as ApiHandler & EndpointsList` where `EndpointsList` is the list of your endpoints.
 
 ## Usage with React
 
@@ -218,34 +219,59 @@ Axios-multi-api includes necessary [TypeScript](http://typescriptlang.org) defin
 ### Example of interface
 
 ```typescript
-import {
-  Endpoints,
-  Endpoint,
-  APIQueryParams,
-  APIUrlParams,
-} from 'axios-multi-api';
+import { Endpoints, Endpoint } from 'axios-multi-api';
 
 import axios from 'axios';
 import { createApiFetcher } from 'axios-multi-api';
 
-interface myQueryParams {
+interface Movie {
+  id: number;
+  title: string;
+  genre: string;
+  releaseDate: string;
+  rating: number;
+}
+
+interface MoviesResponseData {
+  movies: Movie[];
+  totalResults: number;
+  totalPages: number;
+}
+
+interface MoviesQueryParams {
   newMovies: boolean;
 }
 
+interface MoviesDynamicURLParams {
+  movieId?: number;
+}
+
+// You can either extend the Endpoints to skip defining every endpoint
+// Or you can just define the EndpointsList and enjoy more strict typings
 interface EndpointsList extends Endpoints {
-  fetchMovies: Endpoint<myQueryParams, myURLParams, myResponse>;
+  fetchMovies: Endpoint<
+    MoviesResponseData,
+    MoviesQueryParams,
+    MoviesDynamicURLParams
+  >;
 
   // Or you can use just Endpoint
   fetchTVSeries: Endpoint;
 }
 
-const api = createApiFetcher({
+const api = createApiFetcher<EndpointsList>({
   axios,
   // Your config
-}) as unknown as EndpointsList;
+});
 
 // Will return an error since "newMovies" should be a boolean
-api.fetchMovies({ newMovies: 1 });
+const movies = api.fetchMovies({ newMovies: 1 });
+
+// You can also pass type to the request directly
+const movie = api.fetchMovies<MoviesResponseData>(
+  { newMovies: 1 },
+  { movieId: 1 },
+);
 ```
 
 Package ships interfaces with responsible defaults making it easier to add new endpoints. It exposes `Endpoints` and `Endpoint` types.
@@ -292,7 +318,7 @@ async function sendMessage() {
         }
         console.log(error.config);
       },
-    }
+    },
   );
 
   console.log('Message sent successfully');