https://github.com/florianguyonnet/feathers-mobx

implementation of feathers client for mobx
https://github.com/florianguyonnet/feathers-mobx

Last synced: 3 months ago
JSON representation

implementation of feathers client for mobx

• Host: GitHub
• URL: https://github.com/florianguyonnet/feathers-mobx
• Owner: florianguyonnet
• License: mit
• Created: 2020-04-28T21:11:26.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-07-20T12:35:28.000Z (over 4 years ago)
• Last Synced: 2024-07-19T07:11:29.954Z (4 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/feathers-mobx
• Size: 812 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-feathersjs - feathers-mobx - Inplement feathers client into your mobx store (Frontend frameworks / React and Redux)

README

        
## feathers-mobx

> Inplement feathers client into your mobx store

**feathers-mobx** is an integration of the Feathers Client for `mobx`.  

It can be used with any mobx client like `react-mobx` and `vue-mobx`.

#### [documentation](https://florianguyonnet.github.io/feathers-mobx/#/)

#### [example](example/)

## Quick start

### installation

`yarn add feathers-mobx`

### usage

```js

// 

import io from 'socket.io-client';

import feathers from '@feathersjs/feathers';

import socketio from '@feathersjs/socketio-client';

import { createServiceStore, createAuthStore } from 'feathers-mobx';

const socket = io('http://localhost:3030');

const client = feathers();

client.configure(socketio(socket));

const options = {};

export default {

  todoStore: createServiceStore(feathers, 'todos', options),

  userStore: createServiceStore(feathers, 'users', options),

  authStore: createAuthStore(feathers, options),

};

```

```js

// 

import React, { useEffect } from 'react';

import { observer } from 'mobx-react';

import useStores from '../hooks/useStores';

export default observer(() => {

  const { todoStore } = useStores();

  useEffect(() => {

    todoStore.find();

  }, []);

  return (

    


      
{todoStore.isFindPending && 'loading...'}

      
{todoStore.errorOnFind?.message}

      {todoStore.items?.map((todo) => (

        
{todo.name}

      ))}

    

  );

});

```


### namespaces

Namespaces is a feature designed to handle different sets of items at the same time.

```js

// 

import React, { useEffect } from 'react';

import { observer } from 'mobx-react';

import useStores from '../hooks/useStores';

export default observer(() => {

  const { todoStore } = useStores();

  useEffect(() => {

    todoStore.find({

      namespace: 'foo',

    });

    todoStore.get({

      namespace: 'bar',

    });

  }, []);

  return (

    


      
{todoStore.namespaces.bar.item?.name}

      
{todoStore.namespaces.foo.isFindPending && 'loading...'}

      
{todoStore.namespaces.foo.errorOnFind?.message}

      {todoStore.namespaces.foo.items?.map((todo) => (

        
{todo.name}

      ))}

    

  );

});

```


`update`, `patch` and `remove` actions are not scoped in each namespaces. So, the following code will not work:

```js

todoStore.namespaces.foo.isUpdatePending; // NO

todoStore.isUpdatePending; // YES

```

## License

MIT