kossnocorp / typesaurus-react Goto Github PK

Add a section to README with information about how the loading state could be determined.

See: #5

I would like to use Typesaurus React with react-native-firebase on React Native.
Do you have any idea?

Updated data may take a while to arrive. When using an API to create/update data, it's noticeable the end of the loading of the API call to the new data of Firestore to arrive and update the UI. It's strange something ending its loading and nothing changing, until it suddenly changes.

What I am currently doing is that some of my API calls returns the new document to the user. Then, I have a temporary useState that will store this new value. The db data is either this temp data if available or the fetched data itself. I also have a useEffect that when fetched data changes, it resets the temp data.

This way, there isn't that intermediary state of the end of the API call and the wait for the new data to arrive.

Example:

const [store, { error, loading }] = useOnGet(stores, storeId || undefined);
const [storeDataTemp, setStoreDataTemp] = useState<DbStore | null>(null);

const storeData = storeDataTemp ?? store?.data;

useEffect(() => {
  setStoreDataTemp(null); // reset temp data when store db data changes
}, [store?.data]);

My idea is to implement this on useOn hooks, as something like setTempData on the obj retuned by those hooks.

This would fail if somehow (network issues) the API data takes longer than the Firestore data to arrive, and the API data is already obsolete, having the Firestore already newer data. So, older data would overwrite newer data.

In my cases this isn't an issue, as those documents are not updated frequently. Maybe a workaround for more frequent cases would be having a updatedAt timestamp and only allowing using it if newer.

Maybe, the setTempData could also receive a promise of the new data. If Firestore data updates before the API promise resolve, it would discard the incoming setTempData, as it may have older data. This way it would work most of the times, and discard possible problematic ones, although rare. If the Firestore data isn't the newest yet, it will soon be updated. If it's the newest, nice! Updated before the API data arrival.

This is just an idea, maybe not good enough to be included in the lib, but I think it's worth to be shared and to see if somebody has a better solution.

Hey there,

Not an issue, per se, but maybe you'll find it interesting.

ReactFire has lazy-loading for all of the obvious reasons.

Is there a way to pass in an already loaded or lazy instance of firebase or firestore into typesaurus?

Thinking about this from a code-splitting, React.lazy(), Suspense, etc., perspective.

Let's say an error happened while loading all docs in a collection with useAll, like the internet went off, or I just want to fetch the new data (without useOnX). In my ScrollView, I have a refreshControl. How can I fetch the data again?

The current code of useAll is

export default function useAll<Model>(
  collection: Collection<Model>
): TypesaurusHookResult<Doc<Model>[] | undefined> {
  const [result, setResult] = useState<Doc<Model>[] | undefined>(undefined)
  const [error, setError] = useState<unknown>(undefined)
  const loading = result === undefined && !error

  const deps = [JSON.stringify(collection)]
  useEffect(() => {
    if (result) setResult(undefined)
    all(collection).then(setResult).catch(setError)
  }, deps)

  return [result, { loading, error }]
}

What I could do is on refresh set collection to null, ignore the error if collection is null, and useEffect on the error and if the collection is null, change collection to the original value.

Logically seems to work but it's quite ugly. Do you have a better idea for it?

Maybe I will create my custom useAll, that exposes a refresh prop function that just calls all(collection).then(setResult).catch(setError)

I ran into an issue with a next.js client component using useRead. When the component is pre-rendered on the server it would try to load firebase-admin and will throw an error since admin SDK was not configured. This is a client component so the query should only invoke the firebase browser sdk and perform the query in the client only. The workaround I added was to prevent the query from happening on the server using the following code...

useRead(typeof window !== 'undefined' && db.someModel.all().on);

Is there a way this feature can be built into this package so that I do not have to add this to every client component useRead query?

Hi, I tried typesaurus-react that is very easy React Hooks is good 😸

However I want to know loading and error state.

loading state

const user = useGet(users, 42)

This case don't know that is either data not found or data now loading.

for example interface

const [user, loading] = useGet(users, 42)
if (loading) {
  return <span>now loading...</span>
} else {
  if (user) {
    return <span>hello {user.name}!</span>
  } else {
    return <span>user not found</span>
  }
}

This case know not found or now loading.

error state

And If firestore throw error I get error state.

const [user, loading, error] = useGet(users, 42)

if (error) {
  return <div>ERROR: didn't get user</div>
}
...

These example interface are same react-firebase-hooks.

I think it would be useful to have these, but what about?