# react-async-apollo

> This package for handling async on apollo client

Latest version **0.1.0** (published 2021-06-27) · 0 weekly downloads

## Install

```sh
npm install react-async-apollo
pnpm add react-async-apollo
yarn add react-async-apollo
bun add react-async-apollo
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-06-27 |
| First published | 2021-06-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Laskar Ks |
| Maintainers | laskar-ksatria |
| Keywords | react, apollo client, asynchronous, react-apollo, fetch, query, mutation |

## Links

- npm: https://www.npmjs.com/package/react-async-apollo
- Repository: https://github.com/laskar-ksatria/npm-react-async-apollo
- Homepage: https://github.com/laskar-ksatria/npm-react-async-apollo#readme
- Issues: https://github.com/laskar-ksatria/npm-react-async-apollo/issues
- npm.io page: https://npm.io/package/react-async-apollo

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2021-06-27

## README

# react-async-apollo

This was develop for handling asynchronous in various way on Apollo Client, make sure React and Apollo Client was already installed on your project.

You can see how to install Apolo Client on this following docs 

https://www.apollographql.com/docs/react/get-started/

## Install

```
$ npm install react-async-apollo
```



## **Initialize InitProvider**

import InitProvider and mounted on index.js, insert client as props and wrapped the <App/>

```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
import { InitProvider } from 'react-async-apollo';

const client = new ApolloClient({
  uri: '<YOUR GRAPHQL URI>',
  cache: new InMemoryCache(),
})

ReactDOM.render(
  <ApolloProvider client={client}>
    <InitProvider client={client}>
      <App />
    </InitProvider>
  </ApolloProvider>
  ,
  document.getElementById('root')
);
```



## Basic usage

**AsyncApollo(Query, options, [callback])**

| options   | Type   | Required | Value                                                 |
| --------- | ------ | -------- | ----------------------------------------------------- |
| type      | String | Required | query / mutation                                      |
| variables | Object | Optional | variables that you will include in your graphql query |

You can also add options that are in the apollo client documentation such as errorPolicy, fetchPolicy.

View more https://www.apollographql.com/docs/react/data/queries/#supported-fetch-policies

### Fetching

Query sample

```
const Q_GET_DINO = gql`
   {
      dino {
         name
         type
         age
      }
   }
` 
```

**Using Promises**

By default it will return promise

```
import React from 'react';
import { AsyncApollo } from 'react-async-apollo';
import { Q_GET_DINO } from './query';

const App = () => {

  const handleWithPromise = () => {
    AsyncApollo(Q_GET_DINO, { type: 'query', fetchPolicy: "network-only" })
      .then(data => {
        console.log(data)
      })
      .catch(err => console.log(err))
  };
  
  return (
    <div>
      <button onClick={handleWithPromise}>Get with promise</button>
    </div>
  )
};

export default App;
```

**Using Async-Await**

```
import React from 'react';
import { AsyncApollo } from 'react-async-apollo';
import { Q_GET_DINO } from './query';

const App = () => {

  const handleWithAsyncAwait = async () => {
    try {
      let data = await AsyncApollo(Q_GET_DINO, {type: "query", variables: {limit: 2}})
      console.log(data)
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <button onClick={handleWithAsyncAwait}>Get with async await</button>
    </div>
  )
};

export default App;
```

**Using callback**

You can use callback by passing it as a third parameters

```
import React from 'react';
import { AsyncApollo } from 'react-async-apollo';
import { Q_GET_DINO } from './query';

const App = () => {

  const handleWithCallBack = async () => {
    AsyncApollo(Q_GET_DINO, { type: "query" }, (err, data) => {
      if (data) {
        console.log(data)
      } else if (err) {
        console.log(err)
      }
    })
  };

  return (
    <div>
      <button onClick={handleWithCallBack}>Get with callback</button>
    </div>
  )
};

export default App;
```

**Using client** 

You can call the client by passing 'client' on first parameter. It will return as callback

```
import React from 'react';
import { AsyncApollo } from 'react-async-apollo';
import { Q_GET_DINO } from './query';

const App = () => {

  const handleWithClient = () => {
    AsyncApollo('client', async client => {
      let { data, errors } = await client.query({ query: Q_SPACE, errorPolicy: "all" });
      if (data) {
        console.log(data)
      } else if (errors) {
        console.log(errors)
      }
    })
  };

  return (
    <div>
      <button onClick={handleWithClient}>Get with client</button>
    </div>
  )
};

export default App;
```



### Mutation

Similar like fetching, but you passing type as 'mutation'

```
import React from 'react';
import { AsyncApollo } from 'react-async-apollo';
import { Q_LOGIN } from './query';

const App = () => {

  const handleWithPromise = () => {
    AsyncApollo(LOGIN, { type: 'mutation', variables: {email: "your@mail.com", password: "1234"}})
      .then(data => {
        console.log(data)
      })
      .catch(err => console.log(err))
  };
  
  return (
    <div>
      <button onClick={handleWithAsyncAwait}>Mutation with async await</button>
    </div>
  )
};

export default App;
```

Or use a client

```
import React from 'react';
import { AsyncApollo } from 'react-async-apollo';
import { Q_LOGIN } from './query';

const App = () => {

  const handleWithClient = () => {
    AsyncApollo('client', async client => {
      let { data, errors } = await client.mutate({ 
      	mutation: Q_LOGIN, 
      	variables: { email: "laskar@mail.com", password: "1234" } 
      	})
      if (data) console.log(data);
      if (errors) console.log(errors)
    })
  };
  
  return (
    <div>
      <button onClick={handleWithClient}>Mutation with client</button>
    </div>
  )
};

export default App;
```



## Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section.

---
_Source: https://npm.io/package/react-async-apollo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._