npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@harnessio/oats-plugin-react-query-harness

v1.1.0

Published

![@harnessio/oats-plugin-react-query-harness](https://img.shields.io/npm/v/@harnessio/oats-plugin-react-query-harness.svg?style=flat-square)

Downloads

132

Readme

React Query Plugin

@harnessio/oats-plugin-react-query-harness

Plugin for oats cli, for generating react query hooks. This will generate hooks using react-query which are specific to Harness use cases.

Installation

Using NPM:

npm i -D @harnessio/oats-cli @harnessio/oats-plugin-react-query-harness

Using Yarn:

yarn add -D @harnessio/oats-cli @harnessio/oats-plugin-react-query-harness

Usage

// oats.config.ts
import { defineConfig } from '@harnessio/oats-cli/config';
import reactQueryPlugin from '@harnessio/oats-plugin-react-query-harness';

export default defineConfig({
  plugins: [
    reactQueryPlugin({
      /**
       * Path poiniting to the file where the custom fetcher resides.
       * This path will be used as is, while generating the hooks.
       *
       * This path must be a relative path which can be resolved with respect
       * to a file within the hooks folder.
       */
      customFetcher: '../realtive/path/to/custom/fetcher',
      /**
       * An allow-list, for filtering out operation IDs which are to be generated.
       *
       * When defined, hooks will be generated only for the operation IDs
       * defined in this list.
       *
       * This field is optional.
       */
      allowedOperationIds: [],
      /**
       * Override options per operation.
       * The key must the operation Id from the spec.
       * This field is optional.
       */
      overrides: {
        operationId: {
          /**
           * By default, any operation expect "GET", will generate a mutation
           * hook using `useMutation`. This option can be used to overide this
           * behaviour for a given operation ID.
           *
           * When set to `true`, no matter what the verb, query hook will be
           * generated using `useQuery`.
           */
          useQuery: true,
        },
      },
      /**
       * Config for logically grouping APIs together
       * This can is map/record, where the key is a string
       * and value can an array of length 3
       * or  an object (for advanced configuration) as shown below
       *
       * The key will be used as the operation Id for the new hook.
       *
       * If the value is an array, it must be of length 3 and should
       * give operationIds in order: account, organisation, project.
       *
       * For value as object, please read the inline documentation below.
       */
      scopeGroups: {
        'test-connector': [
          'test-account-scoped-connector',
          'test-org-scoped-connector',
          'test-project-scoped-connector',
        ],
        'get-connectors': {
          /**
           * This is used to define advanced settings
           */
          operations: {
            /**
             * OperationId for account scope
             */
            account: 'get-account-scoped-connectors',
            /**
             *  OperationId for organisation scope
             */
            organisation: 'get-org-scoped-connectors',
            /**
             *  OperationId for project scope
             */
            project: 'get-project-scoped-connectors',
          },
          /**
           * By default the codegen will generate hooks using `useQuery` in case of grouping.
           * If you want to use `useMutation`, set this to `true`
           */
          useMutation: false,
        },
      },
    }),
  ],
});

Custom Fetcher

This plugins generates a basic fetcher for you, but this might not useful in the real world. You can provide your own fetcher function which handles your use-cases.

You can configure this using the customFetcher config. It should be a string pointing to the file with custom fetcher. The file must export a function named fetcher and an interface FetcherOptions with the following signature:

export interface FetcherOptions<TQueryParams = never, TBody = never>
  extends Omit<RequestInit, 'body'> {
  url: string;
  queryParams?: TQueryParams extends never ? undefined : TQueryParams;
  body?: TBody extends never ? undefined : TBody;
}

export function fetcher<TResponse = unknown, TQueryParams = never, TBody = never>(
  options: FetcherOptions<TQueryParams, TBody>,
): Promise<TResponse> {
  // your code here
}

You can add additional properties to FetcherOptions as per your requirements, as these additional properties will be passed through from the hook to the fetcher.

You can take a look at the default fetcher generated here