react-query-firebase icon indicating copy to clipboard operation
react-query-firebase copied to clipboard

[Question] Dependant queries and paths

Open ZeroPie opened this issue 3 years ago • 2 comments

I was wondering how you are dealing with a segment of the path being undefined on the first render when one refreshes the page or opens a copy pasted deep link in a new tab

I just did it like this, but im sure there must be a better pattern?

const useGetItem = ({ id = '' }) => {
  const { user } = useAuth();

  // Necesary evil for now because the query value of nextjs router is initially empty and rules of hooks discourage conditional calling.
  
  const path = user?.uid ? `users/${user?.uid}/items/${id}` : 'users/1';

  const itemDocReference = doc(firestore, path).withConverter(ItemConverter);

  return useFirestoreDocumentData(
    ['item', id],
    itemDocReference,
    { idField: 'id' },
    { enabled: !!user?.uid }
  );
};
const useGetUser = () => {
  const { user } = useAuth();
  const userDocReference = doc(firestore, `users/${user?.uid}`).withConverter(
    UserConverter
  );

  return useFirestoreDocumentData(
    ['users'],
    userDocReference,
    {
      idField: 'uid'
    },
    {
      enabled: !!user?.uid
    }
  );
};

ZeroPie avatar Jan 15 '22 18:01 ZeroPie

Struggling with this now, too.

React query documentation on dependent queries says it's enough to set the enabled flag and pass that userId as a key, which might cut down on your code.

Problem is that this library just isnt behaving in the normal react-query way

dougwithseismic avatar Jul 17 '22 06:07 dougwithseismic

Maybe we could make the reference argument take a function too, so it's only called when executed? Should prevent this from being an issue then I think.

Ehesp avatar Jul 17 '22 07:07 Ehesp