0Pricing
tRPC End-to-End Type Safe APIs · 课时

高级 React Query 集成

结合 tRPC 使用 React Query 的预取、失效和后台重新获取等强大功能。

高级 React Query 集成 是 CoddyKit 上的免费 tRPC End-to-End Type Safe APIs 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 tRPC End-to-End Type Safe APIs 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 tRPC End-to-End Type Safe APIs 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Advanced React Query with tRPC

Welcome! In this lesson, we'll dive into advanced features of React Query that supercharge your tRPC applications.

You'll learn how to optimize user experience and ensure data freshness using powerful techniques like prefetching, query invalidation, and background refetching.

Improving UX with Prefetching

Prefetching is about fetching data before a user explicitly requests it. Imagine a blog list: when a user hovers over a post, you can prefetch the detailed post content.

  • Faster Navigation: Reduces loading times when users click a link.
  • Smoother Experience: Eliminates loading spinners on subsequent pages.
  • Anticipatory UI: Makes your app feel snappier and more responsive.

Prefetching tRPC Queries

React Query's queryClient.prefetchQuery allows you to fetch data and store it in the cache. With tRPC, you access the queryClient via trpc.useUtils().

This example simulates prefetching a list of posts when a component is rendered, perhaps on a homepage before a user clicks "View All Posts."

// 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

After you perform an action that changes data on your backend (like creating, updating, or deleting), your client-side cache might become outdated.

Query invalidation tells React Query that certain cached data is "stale" and needs to be refetched the next time it's accessed. This ensures your UI always shows the latest information.

Invalidating After tRPC Mutations

The most common use case for invalidation is after a mutation. When you create a new item, you want the list showing all items to update automatically.

You can use onSuccess callback of useMutation to invalidate related queries.

// 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

Sometimes you don't want to invalidate all queries of a certain type. You might want to invalidate a specific item, like a single post after it's been updated.

React Query uses query keys to identify cached data. You can invalidate queries based on exact keys or partial matches.

// 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

React Query doesn't just refetch data when you manually invalidate it. It also has smart defaults for background refetching.

When a query becomes "stale" (its staleTime expires), React Query will automatically refetch it in the background under certain conditions, like:

  • When a component mounts.
  • When the window refocused.
  • When the network reconnects.

Customizing Refetch Behavior

You can control when data is considered stale using the staleTime option. By default, staleTime is 0, meaning data is immediately stale.

Setting a staleTime (e.g., 5 * 60 * 1000 for 5 minutes) means data won't be refetched for that duration, even if components remount or the window is refocused, improving performance.

// 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

Let's imagine a user flow combining these features:

  1. User lands on a dashboard. We prefetch data for upcoming sections.
  2. User clicks "Edit Profile." The profile data is already in cache (due to prefetching or a recent fetch).
  3. User updates their name. A mutation is triggered.
  4. Upon success, the profile query is invalidated.
  5. The UI automatically refetches in the background (due to invalidation and perhaps staleTime: 0 on the profile query), showing the new name without a full page reload or manual refresh.

React Query Features Quiz

Consider a tRPC application where you have a list of products and a form to add a new product.

Which combination of React Query features would you use to immediately update the product list after a new product is successfully added?

Summary of Advanced Features

Great job! You've learned how to leverage advanced React Query features to build highly performant and user-friendly tRPC applications.

  • Prefetching improves perceived performance by loading data early.
  • Query Invalidation ensures data freshness after mutations.
  • Background Refetching automatically updates stale data.

These techniques are crucial for professional-grade frontend development. Keep experimenting with them!

常见问题解答

「高级 React Query 集成」课时是免费的吗？

是的 — 「高级 React Query 集成」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 tRPC End-to-End Type Safe APIs 课程的其余内容，请升级到 CoddyKit PRO。 tRPC End-to-End Type Safe APIs 课程共包含 4 节课。

「高级 React Query 集成」这节课中我会学到什么？

结合 tRPC 使用 React Query 的预取、失效和后台重新获取等强大功能。 你通过在浏览器中直接运行的动手代码来练习 tRPC End-to-End Type Safe APIs，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 tRPC End-to-End Type Safe APIs 需要有经验吗？

无需任何先前经验。CoddyKit 上的 tRPC End-to-End Type Safe APIs 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「高级 React Query 集成」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 tRPC End-to-End Type Safe APIs 课中编写并运行代码吗？

能。每节 tRPC End-to-End Type Safe APIs 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 在 Next.js 应用路由器中使用 tRPC
  2. 高级 React Query 集成
  3. 服务器组件与 tRPC 数据获取
  4. 使用 tRPC 变更实现乐观更新
← 返回 tRPC End-to-End Type Safe APIs