# next-app-use-query

> Query controller for Next JS - App Directory

Latest version **0.1.2** (published 2024-08-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install next-app-use-query
pnpm add next-app-use-query
yarn add next-app-use-query
bun add next-app-use-query
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2024-08-07 |
| First published | 2024-01-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ali Mortazavi |
| Maintainers | alimortazavi |
| Keywords | nextjs, next, app-directory, app, js, router, query, controller, fixer, use-query, use-query-next, use-query-nextjs, javascript, typescript |

## Links

- npm: https://www.npmjs.com/package/next-app-use-query
- Repository: https://github.com/alimortazavi-pr/next-app-use-query
- Homepage: https://github.com/alimortazavi-pr/next-app-use-query#readme
- Issues: https://github.com/alimortazavi-pr/next-app-use-query/issues
- npm.io page: https://npm.io/package/next-app-use-query

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.2 (latest) — 2024-08-07
- 0.1.1 — 2024-08-07
- 0.1.0 — 2024-08-04
- 0.0.9 — 2024-08-04
- 0.0.8 — 2024-07-10
- 0.0.7 — 2024-07-10
- 0.0.6 — 2024-07-10
- 0.0.5 — 2024-05-12
- 0.0.4 — 2024-05-12
- 0.0.3 — 2024-05-12
- 0.0.2 — 2024-01-08
- 0.0.1 — 2024-01-08

## README

### Query controller for Next JS - App Directory

## Installation

```js
npm install next-app-use-query

pnpm add next-app-use-query

yarn add next-app-use-query
```

## Usage

```js
import { useQuery } from "next-app-use-query";
import { useRouter } from "next/navigation";

const CheckQueryComponent = () => {
  const query = useQuery();
  const router = useRouter();

  function checkQueries() {
    //Get methods
    console.log(query.getAll()); // returns { search : 'Ali Mortazavi' , category: '1' } or {}
    console.log(query.getAll({ toQueryFormat: true })); // returns '?search=Ali+Mortazavi&category=1' or ''
    console.log(query.get("search")); // returns 'Ali Mortazavi' or ''

    //Set methods
    console.log(query.set({ search: "Ali Morazavi", category: "users" })); // returns '?search=Ali+Mortazavi&category=users'
    router.replace(
      "/users" + query.set({ search: "Ali Morazavi", category: "users" })
    );

    //Add methods
    //Add One
    console.log(query.add("rate", "5")); // returns '?search=Ali+Mortazavi&category=users&rate=5'
    router.replace("/users" + query.add("rate", "5"));
    //Add Many
    console.log(
      query.addMany({
        rate: "5",
        score: "10",
      })
    ); // returns '?search=Ali+Mortazavi&category=users&rate=5&score=10'
    router.replace(
      "/users" +
        query.addMany({
          rate: "5",
          score: "10",
        })
    );

    //Delete methods
    //Delete One
    console.log(query.delete("search")); // returns '?category=1&rate=5' or ''
    router.replace("/users" + query.delete("search"));
    //Delete Many
    console.log(query.deleteMany("search", "category")); // returns '?rate=5' or ''
    router.replace("/users" + query.deleteMany("search", "category"));
  }

  return (
    <div>
      <button onClick={checkQueries}>click me</button>
    </div>
  );
};

export default CheckQueryComponent;
```

## Features

- Very fast
- Very easy

---
_Source: https://npm.io/package/next-app-use-query · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._