GPT

Tanstack Integration Features

// src/features/data/useInfiniteUsers.js import { useAuth } from '@clerk/clerk-react'; import { useInfiniteQuery } from '@tanstack/react-query'; export function useInfiniteUsers() { const { getToken } = useAuth(); r

Prompt text

Original English text. Replace placeholders with your own details.

// src/features/data/useInfiniteUsers.js
import { useAuth } from '@clerk/clerk-react';
import { useInfiniteQuery } from '@tanstack/react-query';

export function useInfiniteUsers() {
 const { getToken } = useAuth();
 
 return useInfiniteQuery({
 queryKey: ['users'],
 queryFn: async ({ pageParam = 0 }) => {
 const token = await getToken();
 const response = await fetch(`/api/users?page=${pageParam}`, {
 headers: { Authorization: `Bearer ${token}` }
 });
 return response.json();
 },
 getNextPageParam: (lastPage) => lastPage.nextCursor
 });
}

// src/features/data/useOptimisticUpdate.js
import { useMutation, useQueryClient } from '@tanstack/react-query';

export function useOptimisticUpdate() {
 const queryClient = useQueryClient();
 
 return useMutation({
 mutationFn: async (newData) => {
 // API call to update data
 },
 onMutate: async (newData) => {
 // Cancel outgoing refetches
 await queryClient.cancelQueries(['data']);
 
 // Snapshot previous value
 const previousData = queryClient.getQueryData(['data']);
 
 // Optimistically update
 queryClient.setQueryData(['data'], newData);
 
 return { previousData };
 },
 onError: (err, newData, context) => {
 // Rollback on error
 queryClient.setQueryData(['data'], context.previousData);
 }
 });
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →