Advanced React Query Integration

Advanced React Query with tRPC

Improving UX with Prefetching

Prefetching tRPC Queries

// A simplified demo for prefetching a tRPC query

// --- Mocks for demonstration purposes ---
const mockQueryClient = {
  prefetchQuery: async (queryKey, queryFn) => {
    console.log(`Prefetching: ${JSON.stringify(queryKey)}`);
    // Simulate API call
    const data = await queryFn();
    console.log(`Data for ${JSON.stringify(queryKey)} prefetched:`, data);
    return data;
  }
};

const trpc = {
  post: {
    list: {
      queryFn: async () => {
        // In a real app, this would be your tRPC query
        return new Promise(resolve => setTimeout(() => {
          resolve([{ id: 1, title: 'First Post' }, { id: 2, title: 'Second Post' }]);
        }, 100));
      }
    }
  },
  useUtils: () => ({
    queryClient: mockQueryClient
  })
};
// --- End Mocks ---

async function main() {
  console.log("Starting prefetch demo...");

  // In a React component, you'd call trpc.useUtils()
  const utils = trpc.useUtils();

  // Prefetch the 'post.list' query
  await utils.queryClient.prefetchQuery(
    ['post', 'list'], // tRPC query key
    trpc.post.list.queryFn // The actual fetch function
  );

  console.log("Prefetching complete. Data is now in cache.");
}

main();

Keeping Data Fresh with Invalidation

Invalidating After tRPC Mutations

// A simplified demo for invalidating a tRPC query after a mutation

// --- Mocks for demonstration purposes ---
const mockQueryClient = {
  invalidateQueries: (queryKey) => {
    console.log(`Invalidating queries matching: ${JSON.stringify(queryKey)}`);
    // In a real app, this marks cached data as stale
  }
};

const trpc = {
  post: {
    create: {
      mutateFn: async (newPost) => {
        console.log(`Creating post: ${newPost.title}...`);
        return new Promise(resolve => setTimeout(() => {
          console.log("Post created on server.");
          resolve({ id: 3, ...newPost });
        }, 150));
      }
    }
  },
  useUtils: () => ({
    queryClient: mockQueryClient
  })
};

// Simulate a useMutation hook's logic
async function useCreatePostMutation() {
  const utils = trpc.useUtils();

  return {
    mutateAsync: async (newPost) => {
      const result = await trpc.post.create.mutateFn(newPost);
      // Invalidate the 'post.list' query to refetch it
      utils.queryClient.invalidateQueries(['post', 'list']);
      return result;
    }
  };
}
// --- End Mocks ---

async function main() {
  console.log("Starting invalidation demo...");

  const { mutateAsync } = await useCreatePostMutation();

  await mutateAsync({ title: 'My New Awesome Post' });

  console.log("Mutation complete and 'post.list' query invalidated.");
  console.log("Next time 'post.list' is fetched, it will be fresh.");
}

main();

Targeting Specific Queries

// Demo for granular invalidation

// --- Mocks ---
const mockQueryClient = {
  invalidateQueries: (queryKey) => {
    console.log(`Invalidating specific queries: ${JSON.stringify(queryKey)}`);
  }
};

const trpc = {
  post: {
    update: {
      mutateFn: async (postId, updates) => {
        console.log(`Updating post ${postId} with:`, updates);
        return new Promise(resolve => setTimeout(() => {
          console.log(`Post ${postId} updated.`);
          resolve({ id: postId, ...updates });
        }, 100));
      }
    }
  },
  useUtils: () => ({
    queryClient: mockQueryClient
  })
};

async function useUpdatePostMutation() {
  const utils = trpc.useUtils();

  return {
    mutateAsync: async (postId, updates) => {
      const result = await trpc.post.update.mutateFn(postId, updates);
      // Invalidate the specific post query by ID
      utils.queryClient.invalidateQueries(['post', 'byId', { id: postId }]);
      // You might also invalidate the list if the update affects it
      utils.queryClient.invalidateQueries(['post', 'list']);
      return result;
    }
  };
}
// --- End Mocks ---

async function main() {
  console.log("Starting granular invalidation demo...");
  const { mutateAsync } = await useUpdatePostMutation();
  const postIdToUpdate = 123;

  await mutateAsync(postIdToUpdate, { title: 'Updated Title' });

  console.log(`Queries for post ${postIdToUpdate} and post list invalidated.`);
}

main();

Automatic Background Refetching

Customizing Refetch Behavior

// Demo for configuring staleTime globally

// --- Mocks ---
class QueryClient {
  constructor(options = {}) {
    this.defaultOptions = options.defaultOptions || {};
    console.log("QueryClient initialized with defaultOptions:", this.defaultOptions);
  }
  // Simplified method to show it would apply options
  fetchQuery(queryKey, queryFn, options = {}) {
    const effectiveStaleTime = options.staleTime !== undefined
      ? options.staleTime
      : (this.defaultOptions.queries && this.defaultOptions.queries.staleTime !== undefined
          ? this.defaultOptions.queries.staleTime
          : 0); // Default React Query staleTime
    console.log(`Fetching ${JSON.stringify(queryKey)} with staleTime: ${effectiveStaleTime}`);
    return queryFn(); // Simulate fetch
  }
}

// Simulating React Query's QueryClientProvider setup
function QueryClientProvider({ children, client }) {
  console.log("QueryClientProvider is setting up the client.");
  // In a real React app, 'client' would be available via context
  if (typeof children === 'function') {
    children(client); // Just call the child function for this demo
  }
}
// --- End Mocks ---

async function main() {
  console.log("Starting staleTime configuration demo...");

  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 5, // 5 minutes
        refetchOnWindowFocus: false, // Disable refetch on window focus globally
      },
    },
  });

  QueryClientProvider({
    client: queryClient,
    children: async (client) => {
      // Simulate a tRPC query being made, which would inherit these options
      await client.fetchQuery(['myPost', 1], async () => {
        console.log("Simulating a fetch for 'myPost'.");
        return { id: 1, title: "Configured Post" };
      });
    }
  });

  console.log("QueryClient configured. Queries will respect 5 min staleTime.");
}

main();

A Full Workflow Example

React Query Features Quiz

Summary of Advanced Features