Το Tanstack Query, AKA React Query, είναι μια δημοφιλής βιβλιοθήκη για την ανάκτηση δεδομένων σε εφαρμογές React. Το React Query απλοποιεί τη διαδικασία ανάκτησης, αποθήκευσης στην προσωρινή μνήμη και ενημέρωση δεδομένων σε εφαρμογές web. Αυτό το άρθρο θα συζητήσει τη χρήση του React Query για τη διαχείριση της ανάκτησης δεδομένων σε μια εφαρμογή React.

Εγκατάσταση και ρύθμιση του React Query

Μπορείτε να εγκαταστήσετε το React Query χρησιμοποιώντας npm ή νήμα. Για να το εγκαταστήσετε χρησιμοποιώντας npm, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:

npm i @tanstack/react-query

Για να το εγκαταστήσετε χρησιμοποιώντας νήμα, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:

νήμα προσθήκη @tanstack/react-query

Μετά την εγκατάσταση της βιβλιοθήκης React Query, τυλίγετε ολόκληρη την εφαρμογή στο QueryClientProvider συστατικό. ο QueryClientProvider συστατικό αναδιπλώνει ολόκληρη την εφαρμογή σας και παρέχει μια παρουσία του QueryClient σε όλα τα θυγατρικά του συστατικά.

ο QueryClient είναι το κεντρικό κομμάτι του React Query. ο QueryClient διαχειρίζεται όλη τη λογική ανάκτησης και αποθήκευσης δεδομένων. ο QueryClientProvider συστατικό παίρνει το QueryClient ως στήριγμα και το καθιστά διαθέσιμο στην υπόλοιπη εφαρμογή σας.

Για να κάνετε χρήση του QueryClientProvider και το QueryClient στην αίτησή σας, πρέπει να τα εισαγάγετε από το @tanstack/react-query βιβλιοθήκη:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή ReactDOM από'react-dom/client';
εισαγωγή App από'./Εφαρμογή';
εισαγωγή { QueryClientProvider, QueryClient } από'@tanstack/react-query';
συνθ queryClient = νέος QueryClient();
ReactDOM.createRoot(έγγραφο.getEementd('ρίζα')).καθιστώ(



 </QueryClientProvider>
 </React.StrictMode>
)

Κατανόηση του useQuery Hook

ο useQuery Το hook είναι μια λειτουργία που παρέχεται από τη βιβλιοθήκη του React Query, η οποία ανακτά δεδομένα από έναν διακομιστή ή API. Δέχεται ένα αντικείμενο με τις ακόλουθες ιδιότητες: queryKey (το κλειδί του ερωτήματος) και queryFn (μια συνάρτηση που επιστρέφει μια υπόσχεση που επιλύεται στα δεδομένα που θέλετε να ανακτήσετε).

ο queryKey προσδιορίζει το ερώτημα. πρέπει να είναι μοναδικό για κάθε ερώτημα στην αίτησή σας. Το κλειδί μπορεί να είναι οποιαδήποτε τιμή, όπως μια συμβολοσειρά, ένα αντικείμενο ή ένας πίνακας.

Για ανάκτηση δεδομένων χρησιμοποιώντας το useQuery γάντζο, πρέπει να το εισαγάγετε από το @tanstack/react-query βιβλιοθήκη, πέρασμα α queryKey και χρησιμοποιήστε το queryFn για να ανακτήσετε τα δεδομένα από ένα API.

Για παράδειγμα:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή αξιος από'αξιος';
εισαγωγή { useQuery } από'@tanstack/react-query';
λειτουργίαΣπίτι() {
συνθ postQuery = useQuery({
 queryKey: ["αναρτήσεις"],
 queryFn: ασυγχρονισμός () => {
συνθ ανταπόκριση = αναμένω axios.get(' https://jsonplaceholder.typicode.com/posts');
συνθ δεδομένα = αναμένω answer.data;
ΕΠΙΣΤΡΟΦΗ δεδομένα;
 }
 })
αν( postQuery.isLoading ) ΕΠΙΣΤΡΟΦΗ ( <h1>Φόρτωση...h1>)
αν( postQuery.isError ) ΕΠΙΣΤΡΟΦΗ (<h1>Σφάλμα φόρτωσης δεδομένων!!!h1>)

ΕΠΙΣΤΡΟΦΗ (



Αρχική </h1>
 { postQuery.data.map( (είδος) => ( <Πκλειδί={item.id}>{item.title}Π>)) }
 </div>
 )
}
εξαγωγήΠροκαθορισμένο Σπίτι;

ο useQuery Το hook επιστρέφει ένα αντικείμενο που περιέχει πληροφορίες για το ερώτημα. ο postQuery αντικείμενο περιέχει το είναι Φόρτωση, είναι Σφάλμα, και είναι Επιτυχία πολιτείες. ο είναι Φόρτωση, είναι Σφάλμα, και είναι Επιτυχία τα κράτη διαχειρίζονται τον κύκλο ζωής της διαδικασίας ανάκτησης δεδομένων. ο postQuery.data Η ιδιότητα περιέχει τα δεδομένα που λαμβάνονται από το API.

ο είναι Φόρτωση κατάσταση είναι μια δυαδική τιμή που υποδεικνύει εάν το ερώτημα φορτώνει δεδομένα αυτήν τη στιγμή. Οταν ο είναι Φόρτωση κατάσταση είναι αληθής, το ερώτημα είναι σε εξέλιξη και τα ζητούμενα δεδομένα δεν είναι διαθέσιμα.

ο είναι Σφάλμα κατάσταση είναι επίσης μια δυαδική τιμή που υποδεικνύει εάν παρουσιάστηκε σφάλμα κατά την ανάκτηση δεδομένων. Οταν είναι Σφάλμα είναι αλήθεια, το ερώτημα απέτυχε να ανακτήσει δεδομένα.

ο είναι Επιτυχία κατάσταση είναι μια δυαδική τιμή που υποδεικνύει εάν το ερώτημα έχει ανακτήσει με επιτυχία δεδομένα. Οταν είναι Επιτυχία είναι αλήθεια, μπορείτε να εμφανίσετε τα δεδομένα που ανακτήθηκαν στην εφαρμογή σας.

Σημειώστε ότι μπορείτε να έχετε πρόσβαση στο queryKey χρησιμοποιώντας την queryFn. ο queryFn παίρνει ένα μόνο επιχείρημα. Αυτό το όρισμα είναι ένα αντικείμενο που περιέχει τις παραμέτρους που απαιτούνται για το αίτημα API. Μία από αυτές τις παραμέτρους είναι η queryKey.

Για παράδειγμα:

useQuery({
 queryKey: ["αναρτήσεις"],
 queryFn: ασυγχρονισμός (αντικείμενο) => {
κονσόλα.log( obj.queryKey );
 }
 })

Αντιμετώπιση παλιών δεδομένων

Το ερώτημα React παρέχει πολλούς τρόπους αντιμετώπισης μπαγιάτικων δεδομένων. Η βιβλιοθήκη του React Query διασφαλίζει την αυτόματη υποβολή νέου αιτήματος ανάκτησης στο API σας όταν τα δεδομένα που ανακτήθηκαν είναι μπαγιάτικα. Αυτό εγγυάται ότι αποδίδετε συνεχώς τα πιο ενημερωμένα δεδομένα.

Μπορείτε να ελέγξετε πόσο γρήγορα τα δεδομένα σας παλαιώνονται και το χρονικό διάστημα ανάμεσα σε κάθε αίτημα αυτόματης ανάκτησης χρησιμοποιώντας το staleTime και refetchInterval επιλογές. ο staleTime Η επιλογή είναι μια ιδιότητα που καθορίζει τον αριθμό των χιλιοστών του δευτερολέπτου που είναι έγκυρα τα αποθηκευμένα δεδομένα στην κρυφή μνήμη πριν γίνουν μπαγιάτικα.

ο refetchInterval Η επιλογή είναι μια ιδιότητα που καθορίζει τον αριθμό των χιλιοστών του δευτερολέπτου μεταξύ κάθε αιτήματος αυτόματης ανάκτησης της βιβλιοθήκης του React Query.

Για παράδειγμα:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 staleTime: 1000;
})

Σε αυτό το παράδειγμα, το staleTime είναι 1000 χιλιοστά του δευτερολέπτου (1 δευτερόλεπτο). Τα δεδομένα που θα ανακτηθούν θα γίνουν μπαγιάτικα μετά από 1 δευτερόλεπτο και, στη συνέχεια, η βιβλιοθήκη του React Query θα υποβάλει ένα άλλο αίτημα ανάκτησης στο API.

Εδώ χρησιμοποιείτε το refetchInterval επιλογή για τον έλεγχο του χρονικού διαστήματος μεταξύ κάθε αυτόματης αίτησης ανάκτησης:

useQuery({
 queryKey: ['...'],
 queryFn: () => {...},
 refetchInterval: 6000;
})

ο refetchInterval είναι 6000 χιλιοστά του δευτερολέπτου (6 δευτερόλεπτα). Το ερώτημα React θα ενεργοποιήσει αυτόματα ένα νέο αίτημα ανάκτησης για την ενημέρωση των αποθηκευμένων δεδομένων στην κρυφή μνήμη μετά από 6 δευτερόλεπτα.

Κατανόηση της χρήσηςMutation Hook

ο χρήσηΜετάλλαξη Το hook είναι ένα ισχυρό εργαλείο στη βιβλιοθήκη του React Query. Το εκτελεί ασύγχρονη λειτουργία μεταλλάξεις, όπως η δημιουργία ή η ενημέρωση δεδομένων σε έναν διακομιστή. Χρησιμοποιώντας την χρήσηΜετάλλαξη hook, μπορείτε εύκολα να ενημερώσετε την κατάσταση της εφαρμογής σας και τη διεπαφή χρήστη με βάση την απόκριση της μετάλλαξης.

Παρακάτω, δημιουργήσαμε ένα AddPost συστατικό που αποδίδει α φόρμα με ένα πεδίο εισαγωγής και ένα κουμπί υποβολής. Αυτό το στοιχείο φόρμας θα χρησιμοποιήσει το άγκιστρο useMutation για να ενημερώσει την κατάσταση:

εισαγωγή Αντιδρώ από'αντιδρώ'
λειτουργίαAddPost() {
συνθ[post, setPost] = React.useState({
 τίτλος: ""
 })
λειτουργίαλαβήΑλλαγή(Εκδήλωση) {
 setPost( (prevState) => ({
 ...προηγούμενη πολιτεία,
 [event.target.name]: event.target.value
 }) )
 }
ΕΠΙΣΤΡΟΦΗ (



 τύπος="κείμενο"
 placeholder='Προσθέστε τίτλο'
 όνομα='τίτλος'
 onChange={handleChange} 
 value={post.title}
 />
Προσθήκη ανάρτησης</button>
 </form>
 )
}
εξαγωγήΠροκαθορισμένο AddPost;

μεσα στην AddPost συστατικό είναι μια κατάσταση Θέση που χρησιμεύει ως αντικείμενο με μία ιδιότητα, τίτλος.

ο λαβήΑλλαγή η λειτουργία ενημερώνει την κατάσταση Θέση κάθε φορά που οι χρήστες πληκτρολογούν στα πεδία εισαγωγής. Μετά τη δημιουργία του AddPost συστατικό, εισάγουμε το χρήσηΜετάλλαξη συνδέστε το και χρησιμοποιήστε το για να ενημερώσετε το API.

Για παράδειγμα:

εισαγωγή { useMutation } από'@tanstack/react-query'
εισαγωγή αξιος από'αξιος';
συνθ newPostMutation = useMutation({
 mutationFn: ασυγχρονισμός () => {
συνθ ανταπόκριση = αναμένω axios.post('', {
 τίτλος: ανάρτηση.τίτλος,
 });
συνθ δεδομένα = απάντηση.δεδομένα;
ΕΠΙΣΤΡΟΦΗ δεδομένα;
 }
 })

ο χρήσηΜετάλλαξη Το hook χειρίζεται το αίτημα HTTP για τη δημιουργία μιας νέας ανάρτησης. ο newPostMutation σταθερά αντιπροσωπεύει τη συνάρτηση μετάλλαξης και τις επιλογές διαμόρφωσής της.

ο μετάλλαξηFn είναι μια ασύγχρονη συνάρτηση που στέλνει ένα αίτημα POST στο τελικό σημείο API. Το αίτημα περιλαμβάνει ένα αντικείμενο που περιέχει το τίτλος αξία από το Θέση αντικείμενο.

Για να τρέξετε το μετάλλαξηFn, θα χρειαστεί να καλέσετε το newPostMutation.mutate() μέθοδος:

συνθ handleΥποβολή = ασυγχρονισμός (γεγονός) => { 
 event.preventDefault();
 newPostMutation.mutate();
}
ΕΠΙΣΤΡΟΦΗ (


 τύπος="κείμενο"
 placeholder='Προσθέστε τίτλο'
 όνομα='τίτλος'
 onChange={handleChange} 
 value={post.title}
 />
Προσθήκη ανάρτησης</button>
 </form>
 )
}

Η υποβολή της φόρμας θα εκτελεστεί το handleSubmit λειτουργία. ο handleSubmit Η συνάρτηση είναι μια ασύγχρονη συνάρτηση που ενεργοποιεί τη συνάρτηση μετάλλαξης newPostMutation.mutate().

Αποτελεσματική ανάκτηση δεδομένων με το ερώτημα Tanstack

Αυτό το άρθρο διερευνά τον τρόπο χειρισμού της ανάκτησης δεδομένων σε μια εφαρμογή React χρησιμοποιώντας τη βιβλιοθήκη tanstack/react-query.

Η βιβλιοθήκη tanstack/react-query παρέχει ένα ισχυρό και ευέλικτο εργαλείο για την ανάκτηση και την προσωρινή αποθήκευση δεδομένων σε εφαρμογές React. Είναι εύκολο στη χρήση και οι δυνατότητες αποθήκευσης στην κρυφή μνήμη το καθιστούν αποτελεσματικό και αποκριτικό.

Είτε δημιουργείτε ένα μικρό προσωπικό έργο είτε μια εκτενή εταιρική εφαρμογή, η βιβλιοθήκη tanstack/react-query μπορεί να σας βοηθήσει να διαχειριστείτε και να εμφανίσετε δεδομένα αποτελεσματικά και αποδοτικά. Μαζί με το React, το Next.js παρέχει επίσης πολλές ενσωματωμένες διεργασίες και βιβλιοθήκες τρίτων για τη διαχείριση της ανάκτησης δεδομένων.