My RTK Generator

My RTK Generator is a powerful tool designed to automatically generate Redux Toolkit Query endpoints from a Swagger YAML file. This package simplifies the process of setting up API queries and mutations in projects that rely on RESTful APIs, making it especially useful for React, React Native, and Next.js applications.

With My RTK Generator, you can streamline the integration of API endpoints, reduce boilerplate code, and maintain consistency across your Redux Query setup. Simply provide a configuration file pointing to your Swagger YAML file, and the package will handle the rest—creating a fully functional apiSlice with RTK Query endpoints based on your API specification.

Why Use My RTK Generator?

Setting up API endpoints manually in Redux Toolkit Query can be a repetitive and error-prone task, especially when dealing with large or complex APIs. My RTK Generator automates this process by reading your Swagger YAML file and generating the necessary query and mutation endpoints for you. This approach provides several benefits:

• Saves Time and Effort: No need to write each endpoint manually; the generator does it for you.
• Consistency: Ensures a standardized structure for all endpoints.
• Scalability: Easily update your API by modifying the Swagger file and regenerating the endpoints.
• Error Reduction: Minimizes manual errors, leading to a more reliable and robust API layer.

Installation

Install My RTK Generator as a development dependency in your project:

npm install my-rtk-generator --save-dev

or using yarn:

yarn add my-rtk-generator --dev

Usage

My RTK Generator uses a configuration file, my-rtk-generator.config.js, which should be placed in the root directory of your project. This configuration file specifies the input (path to the Swagger YAML file) and the output (path where the generated apiSlice will be saved).

Step 1: Create a Configuration File

In your project's root directory, create a my-rtk-generator.config.js file with the following structure:

// my-rtk-generator.config.js

module.exports = {
  input: './swagger.yaml',            // Path to your Swagger YAML file
  output: './src/api/apiSlice.js'     // Path where the generated apiSlice file will be saved
};

• input: Path to the Swagger YAML file that defines your API endpoints.
• output: Path where the generated apiSlice.js file will be saved. This file will contain all the RTK Query endpoints based on the Swagger specification.

Step 2: Run the Generator

After setting up the configuration file, generate the API slice by running:

npx mehdi

This command will:

1. Read the Swagger YAML file from the input path specified in my-rtk-generator.config.js.
2. Generate the apiSlice.js file at the specified output path, with all the query and mutation endpoints configured for RTK Query.

Step 3: Import and Use the Generated apiSlice

Once the apiSlice.js file is generated, you can integrate it into your Redux store and start using the auto-generated endpoints in your components.

// src/app/store.js

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from '../api/apiSlice';

const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

export default store;

In your components, you can now use the auto-generated hooks based on your Swagger YAML file:

import React from 'react';
import { useGetUsersQuery, useCreateUserMutation } from '../api/apiSlice';

function Users() {
  const { data: users, error, isLoading } = useGetUsersQuery();
  const [createUser] = useCreateUserMutation();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading users.</p>;

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={() => createUser({ name: 'New User' })}>
        Add User
      </button>
    </div>
  );
}

export default Users;

Example Configuration

Below is an example of how my-rtk-generator.config.js should look:

module.exports = {
  input: './api/swagger.yaml',
  output: './src/api/apiSlice.js',
};

This configuration will read the Swagger file located at ./api/swagger.yaml and output the generated RTK Query slice to ./src/api/apiSlice.js.

Advanced Usage

If you need to regenerate the endpoints whenever your Swagger file changes, consider using a file-watcher (e.g., nodemon, chokidar) to automatically rerun npx mehdi on file changes.

For example, with nodemon:

npx nodemon -w ./api/swagger.yaml -x "npx mehdi"

This command will automatically regenerate the apiSlice every time you update the Swagger YAML file.

Troubleshooting

• Config File Not Found: If you see an error about the configuration file, make sure my-rtk-generator.config.js exists in the root of your project and is correctly formatted.
• Invalid YAML Format: If the Swagger YAML file has syntax issues, My RTK Generator may fail. Validate your YAML file with an online tool if you encounter problems.
• ENOENT Error: This error indicates that the specified input or output path in my-rtk-generator.config.js is incorrect or does not exist. Double-check the paths and ensure they are correct.

Contributing

Contributions to My RTK Generator are welcome! If you have suggestions for improvements, feel free to open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.

With My RTK Generator, setting up Redux Toolkit Query endpoints is as easy as writing a configuration file and running a single command. Say goodbye to repetitive code and hello to a more efficient workflow!