humaans / figbird Goto Github PK

Repo:

https://github.com/robbyphillips/figbird-issue

Expected

Query parameters in useFind should have no effect on commands sent with useMutation.

Actual

Using a query operator that is not in this list in a useFind query causes an Invalid Query Parameter error when using a useMutation method later

To Reproduce (in the repo above)

1. yarn install
2. yarn start:dev
3. Try to use the very search and create inputs.
4. See the errors in the console.

Note that there is no error when using the query parameter $like in a useFind query. The error only occurs when using a method of useMutation, and even then, the actual create or patch is successful despite the error.

hi there,
with feathersjs api when you try to use useFind with allPages: true, if you have a $in with your _id field:

useFind('feathers-service-name', {
  query: {
    outlet: this.state._id,
    category: { $in: mc.data.map(m => m._id) },
    $sort: "sortKey"
  },
  allPages: true
})

it loads duplicated entries inside data

Hello Community,

Can figbird be used in a ReactJs class component? If so, are there any examples that can be shared? Thanks.

At the moment we mount realtime event handlers with each query and stop listening to them once that component is unmounted, this can cause data integrity issues. Instead we should maybe have one central listener that listens to all events and updates the cache.

One edge case to handle here is the queries that use "refetch" mode, it would be wasteful to refetch such queries in the background if their not mounted. Ingesting a realtime event into cache (hit or miss) is cheap. But doing refetches is expensive and should only be done if relevant for the current screen. Having said that, refetches are rare, and perhaps it's ok if the data is not fresh for queries using refetch mode, the integrity issue should be handled by guarding etc. in those rare cases where refetch is being used. A bit leaky, but might be the case of good enough.

Hi!

Is there any plans to describe the types or maybe even to rewrite the lib in typescript?

thank you!

hi
I am trying to implement feathers-graph-populate but when I want to use Client-Side Params I don't know where to call the before hook when I am using figbird on the client side .

Hi All,

First off, great library! I was going to build out something similar until I came upon this. Thanks for saving me a bunch of time.

When using the useFind hook, It seems to return the first result for every result. Here is what I am using:

const { loading, error, data } = useFind('templates', { query: {}, });

Result in component: The first result repeated 5 times.

Result verified in websocket return : Correct.

Any idea what may be causing this?

there is a little gap in the logic, what about when you are requesting something like this,

query : {
include: [UserData]
}

the include is treat in the backend doing the association and in the client that reference to the same item id so it get updated and sometimes removed, the id must be composed by the relations included so it does not get updated or deleted by other queries without this association included
.

good project by the way. I like.

Hello Community,

When I remove an item using the remove function returned from useMutation, it appears the item is not removed till the real time event is received. Is there a way to remove it immediately without waiting on the event to be received (e.g. remove from local cache) manually?

useRealtime((event, payload) => {})

You could handle events this way and do things like refetch/update local component state in a specific way, etc.

Hello,

I want to thank you first for this awsome library. We are having some trouble dealing with pagination when using useFind().
We would want to have a "load more" behavior, so that each time we would increase the limit. As it seems that useFind() will re-fetch the data from the begining. Adding a "$skip" parameter would not give us the data from the start.

Any idea how to deal with this plz ?

Also I noticed that feathers returns the data in the "meta" attribute in useFind.tsx finder() function and sort of does the fetchNext() recursively, so I guess it should be like this right :

result.limit = res.meta.limit
result.total = res.meta.total

Hello Community,

Please note that when I try to install figbird via npm, I am getting the below error. Any help appreciated.

npm install figbird
npm ERR! Cannot read properties of null (reading 'children')

Hi folks @humaans! Loving figbird so far!

I have a question regrading how to handle auth expiry error. Usually I would have a helper function for requests that would handle it and do whats needed, but because this is a hook I cant do this.

Right now I am making my useFind request and then checking is error && error.message == "notAuthenticated" and pushing to an expiry page.

Whats the best way to do this?

Thanks.

Description

I am using the useMutation hook and I am experiencing an issue where the hook does not update the hook state after the first API request, and it does update it after subsequent API requests but with the previous call's result.

Steps to Reproduce

• Import the useMutation hook from figbird into a React component
• Call the patch() from hook in the component and observe that the state is not updated
• Call it again without refreshing and observe that the state is updated

Expected Behavior

The useMutation hook should update the state after each API request.

Actual Behavior

The useMutation hook only updates the state after subsequent API requests with the previous API request's response, and not after the first API request.

Environment

node: 16.19.0
figbird: 0.11.1
React: 18.2.0
vite: 4.0.0

Usage

    const { patch, status, error } = useMutation(SERVICE);
    patch(id, payload);
    console.log("status, error ",status, error );
    // returns the null, idle after the first call, but changes in the second call 

Additional Information

The same thing works perfectly in useGet and useFind hooks.

I was unable to figure out how to use figbird because the example was incomplete. It doesn't include the client configuration module. Here's what the code should look like, according to David Luecke

import React, {useState} from 'react';
import {Provider} from 'figbird';
**import client from './feathers';**
import Users from './Notes.js';

function App() {
    return (
        <Provider feathers={**client**}>
            <Notes/>
        </Provider>
    )
}
export default App;

Note that, in this example, the module in ./feathers contains the feathers configuration (URL, socket, etc.). In the current example, it would be impossible to specify a different port.