Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

How do I pass variables to hooks?

Aperta
  • Qualcosa non va?
#80 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
28/100
Tipo di issue
Documentazione
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
firebase, react, typescript
Ambito
database, documentation

Direzione di ricerca

Inizia dal punto di ingresso useFirestoreDocumentDeletion e dalla guida collegata sulla mutazione dei dati di Firestore, quindi confronta l’API di mutazione con il flusso richiesto dell’ID per elemento. Il lavoro è completato quando l’approccio supportato per i riferimenti a documenti dinamici o le variabili è documentato con un piccolo esempio.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

react-query-firebase

When I've used React Query before, I used it as a hook. Like Tanner showed in this demo: https://youtu.be/DocXo3gqGdI?t=2817

And also in the React Query Docs, https://tanstack.com/query/v4/docs/guides/mutations
It shows how data can be passed into a useMutation that runs inside mutationFn. This allows you to abstract a 'useUpdateMyData' hook, or something like that. And it has all of the fetching logic inside, and you just pass a small amount of data to make it mutate different documents.

function App() {
  const mutation = useMutation({
    mutationFn: newTodo => { // Right here, data comes in as newTodo
      return axios.post('/todos', newTodo)
    }
  })

  return (
    <div>
      {mutation.isLoading ? (
        'Adding todo...'
      ) : (
        <>
          {mutation.isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {mutation.isSuccess ? <div>Todo added!</div> : null}

          <button
            onClick={() => {
              mutation.mutate({ id: new Date(), title: 'Do Laundry' })
            }}
          >
            Create Todo
          </button>
        </>
      )}
    </div>
  )
}

I incorporated that into custom hooks on other projects:

import 'react-native-get-random-values';
import Constants from 'expo-constants';
import { useMutation, useQueryClient } from 'react-query';
import getDbName from '../../utils/loadDatabaseName';
const CosmosClient = require('@azure/cosmos').CosmosClient;

const containerId = 'logbooks';

export const useDeleteLogbook = () => {
  const queryClient = useQueryClient();
  const { mutate: deleteLogbook } = useMutation(
    newLogbook => mutation(newLogbook),
    {
      onSuccess: () => {
        queryClient.invalidateQueries('logbooks');
      },
    }
  );
  return { deleteLogbook };
};

const mutation = async logbook => { // Right here, my dynamic data comes into my hook as 'logbook'
  const endpoint = await Constants.manifest.extra.cosmosEndpoint;
  const key = await Constants.manifest.extra.cosmosKey;
  const databaseId = await getDbName();
  const client = new CosmosClient({ endpoint, key });

  await client
    .database(databaseId)
    .container(containerId)
    .item(logbook.id, logbook.userId)
    .delete();
};

Then in my code, I could use the hook and it was incredibly clean:


// Inside react component:
const { deleteLogbook } = useDeleteLogbook();
          onPress: () => deleteLogbook(logbook),

But now I'm trying to do the same thing with this package, and I'm running into trouble.

I've implemented a custom deletion hook like so. But I can't find a way to pass dynamic variables in as before.

import { collection, doc } from 'firebase/firestore';
import { useFirestoreDocumentDeletion } from '@react-query-firebase/firestore';
import { db } from '../../utils/firebase';

export const useDeleteLogbook = () => {
  const collection = collection(db, 'logbooks');
  const ref = doc(collection, '456');// I want to pass a dynamic value here instead of 456
  const { mutation: deleteLogbook } = useFirestoreDocumentDeletion(ref);
  return { deleteLogbook };
};

According to your example, you call the mutate function with no data passed in. Just mutation.mutate()

 <button
        disabled={mutation.isLoading}
        onClick={() => {
          mutation.mutate(); // No data passed in
        }}
      >
        Delete document
      </button>

https://react-query-firebase.invertase.dev/firestore/data-mutation

So I'm wondering, how do we implement this with dynamic data? For example, if I have a list, where each item has a delete button. How do I pass in mutation.mutate(<clickedElement'sId>) so that my react-query-firebase code can delete the correct document?

Could you point me in the right direction or give me a small example?

I tried reading the code of this package, but I'm not great with typescript yet.

Lingua principale
TypeScript
Stelle
462
Fork
70
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di invertase/tanstack-query-firebase

Tutte le issue di invertase/tanstack-query-firebase

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.