open-index/open-npm huggingface dataset:
npm package: @rest-hooks/graphql
Description: Endpoints for GraphQL APIs
Author: Nathaniel Tucker
Latest version: 0.6.2

# Rest Hooks for GraphQL

[![CircleCI](https://circleci.com/gh/data-client/rest-hooks/tree/master.svg?style=shield)](https://circleci.com/gh/data-client/rest-hooks)
[![Coverage Status](https://img.shields.io/codecov/c/gh/data-client/rest-hooks/master.svg?style=flat-square)](https://app.codecov.io/gh/data-client/rest-hooks?branch=master)
[![npm downloads](https://img.shields.io/npm/dm/@rest-hooks/graphql.svg?style=flat-square)](https://www.npmjs.com/package/@rest-hooks/graphql)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@rest-hooks/graphql?style=flat-square)](https://bundlephobia.com/result?p=@rest-hooks/graphql)
[![npm version](https://img.shields.io/npm/v/@rest-hooks/graphql.svg?style=flat-square)](https://www.npmjs.com/package/@rest-hooks/graphql)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
[![Chat](https://img.shields.io/discord/768254430381735967.svg?style=flat-square&colorB=758ED3)](https://discord.gg/35nb8Mz)

[GraphQL Endpoints](https://resthooks.io/graphql) for [Rest Hooks](https://resthooks.io)

<div align="center">

**[📖Read The Docs](https://resthooks.io/graphql)** &nbsp;|&nbsp; [🎮Github Demo](https://stackblitz.com/github/data-client/rest-hooks/tree/rest-hooks-site/examples/github-app?file=src%2Fresources%2FRepository.tsx)

</div>

### Define GraphQL endpoint

```typescript
const gql = new GQLEndpoint('https://nosy-baritone.glitch.me');
```

### Simple TypeScript definition

```typescript
class User extends GQLEntity {
  readonly name: string = '';
  readonly email: string = '';
}
```

### Write type-safe queries

```typescript
const userList = gql.query(
  `{
    users {
      id
      name
      email
      }
    }`,
  { users: [User] },
);

const userDetail = gql.query(
  `query UserDetail($name: String!) {
    user(name: $name) {
      id
      name
      email
    }
  }`,
  { user: User },
);
```

### One line data-hookup

```tsx
const { user } = useSuspense(userDetail, { name: 'Fong' });
return (
  <>
    <h2>{user.name}</h2>
    <p>{user.email}</p>
  </>
);
```

### Mutations

```ts
const gql = new GQLEndpoint('https://graphql.org/swapi-graphql');

const createReview = gql.mutation(
  `mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
    createReview(episode: $ep, review: $review) {
      stars
      commentary
    }
  }`,
  { createReview: Review },
);
```

```tsx
const controller = useController();
const createReview = useFetcher(createReview);
return <ReviewForm onSubmit={data => controller.fetch(createReview, data)} />;
```
npm package: @rest-hooks/hooks
Description: Collection of composable data hooks
Author: Nathaniel Tucker
Latest version: 3.1.15

# Networking Hooks
[![CircleCI](https://circleci.com/gh/data-client/rest-hooks/tree/master.svg?style=shield)](https://circleci.com/gh/data-client/rest-hooks)
[![Coverage Status](https://img.shields.io/codecov/c/gh/data-client/rest-hooks/master.svg?style=flat-square)](https://app.codecov.io/gh/data-client/rest-hooks?branch=master)
[![npm downloads](https://img.shields.io/npm/dm/@rest-hooks/hooks.svg?style=flat-square)](https://www.npmjs.com/package/@rest-hooks/hooks)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@rest-hooks/hooks?style=flat-square)](https://bundlephobia.com/result?p=@rest-hooks/hooks)
[![npm version](https://img.shields.io/npm/v/@rest-hooks/hooks.svg?style=flat-square)](https://www.npmjs.com/package/@rest-hooks/hooks)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

Composable hooks for networking data

<div align="center">

**[📖Read The Docs](https://resthooks.io/docs/api/useDebounce)**

</div>

### [useCancelling()](https://resthooks.io/docs/api/useCancelling)

[Aborts](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) inflight request if the parameters change.

```typescript
const data = useSuspense(useCancelling(MyEndpoint, { filter }), { filter });
```

### [useDebounce()](https://resthooks.io/docs/api/useDebounce)

Delays updating the parameters by [debouncing](https://css-tricks.com/debouncing-throttling-explained-examples/).
Useful to avoid spamming network requests when parameters might change quickly (like a typeahead field).

```typescript
const debouncedFilter = useDebounce(filter, 200);
const data = useSuspense(SearchList, { filter: debouncedFilter });
```

### [useLoading()](https://resthooks.io/docs/api/useDebounce)

Helps track loading state of imperative async functions.

```tsx
function Button({ onClick, children, ...props }) {
  const [clickHandler, loading, error] = useLoading(onClick);
  return (
    <button onClick={clickHandler} {...props}>
      {loading ? 'Loading...' : children}
    </button>
  );
}
```
npm package: @rest-hooks/legacy
Description: Legacy features for Rest Hooks
Author: Nathaniel Tucker
Latest version: 9.0.3

# ![🛌🎣 Rest Hooks Legacy](https://raw.githubusercontent.com/data-client/rest-hooks/master/packages/rest-hooks/rest_hooks_logo_and_text.svg?sanitize=true)
[![CircleCI](https://circleci.com/gh/data-client/rest-hooks/tree/master.svg?style=shield)](https://circleci.com/gh/data-client/rest-hooks)
[![Coverage Status](https://img.shields.io/codecov/c/gh/data-client/rest-hooks/master.svg?style=flat-square)](https://app.codecov.io/gh/data-client/rest-hooks?branch=master)
[![npm downloads](https://img.shields.io/npm/dm/@rest-hooks/legacy.svg?style=flat-square)](https://www.npmjs.com/package/@rest-hooks/legacy)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@rest-hooks/legacy?style=flat-square)](https://bundlephobia.com/result?p=@rest-hooks/legacy)
[![npm version](https://img.shields.io/npm/v/@rest-hooks/legacy.svg?style=flat-square)](https://www.npmjs.com/package/@rest-hooks/legacy)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

[Rest Hooks](https://resthooks.io) legacy support.

<div align="center">

**[📖Read The Docs](https://resthooks.io/docs/upgrade/upgrading-to-7)**

</div>

## shapeToEndpoint

```tsx
import { shapeToEndpoint } from '@rest-hooks/legacy';

function MyComponent() {
  const endpoint: any = useMemo(() => {
    return shapeToEndpoint(fetchShape);
    // we currently don't support shape changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const mydata = useSuspense(endpoint, params);
  //...
}
```
npm package: @rest-hooks/use-enhanced-reducer
Description: Add powerful orchestration to hooks-based Flux stores
Author: Nathaniel Tucker
Latest version: 1.2.9

# useEnhancedReducer() - middlewares for React Hooks flux stores

[![CircleCI](https://circleci.com/gh/data-client/rest-hooks/tree/master.svg?style=shield)](https://circleci.com/gh/data-client/rest-hooks)
[![Coverage Status](https://img.shields.io/codecov/c/gh/data-client/rest-hooks/master.svg?style=flat-square)](https://app.codecov.io/gh/data-client/rest-hooks?branch=master)
[![npm downloads](https://img.shields.io/npm/dm/@rest-hooks/use-enhanced-reducer.svg?style=flat-square)](https://www.npmjs.com/package/@rest-hooks/use-enhanced-reducer)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@rest-hooks/use-enhanced-reducer?style=flat-square)](https://bundlephobia.com/result?p=@rest-hooks/use-enhanced-reducer)
[![npm version](https://img.shields.io/npm/v/@rest-hooks/use-enhanced-reducer.svg?style=flat-square)](https://www.npmjs.com/package/@rest-hooks/use-enhanced-reducer)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

`useEnhancedReducer()` empowers building complex orchestration into flux stores built using React Hooks.

#### `loggerMiddleware.ts`

```typescript
import { MiddlewareAPI, Dispatch } from '@rest-hooks/use-enhanced-reducer';

export default function loggerMiddleware<R extends React.Reducer<any, any>>({
  getState,
  dispatch,
}: MiddlewareAPI<R>) {
  return (next: Dispatch<R>) => async (action: React.ReducerAction<R>) => {
    console.group(action.type);
    console.log('before', getState());
    await next(action);
    console.log('after', getState());
    console.groupEnd();
  };
}
```

#### `CacheProvider.tsx`

```tsx
import {
  useEnhancedReducer,
  Middleware,
} from '@rest-hooks/use-enhanced-reducer';

interface ProviderProps {
  children: ReactNode;
  middlewares: Middleware[];
  initialState: State<unknown>;
}

export default function CacheProvider({
  children,
  middlewares,
  initialState,
}: ProviderProps) {
  const [state, dispatch] = useEnhancedReducer(
    masterReducer,
    initialState,
    middlewares,
  );

  return (
    <DispatchContext.Provider value={dispatch}>
      <StateContext.Provider value={state}>{children}</StateContext.Provider>
    </DispatchContext.Provider>
  );
}
```

## Middleware Examples

- Rest Hook's [NetworkManager](https://github.com/data-client/rest-hooks/blob/master/packages/rest-hooks/src/state/NetworkManager.ts)
- Rest Hook's [PollingSubscription](https://github.com/data-client/rest-hooks/blob/master/packages/rest-hooks/src/state/PollingSubscription.ts)