如何基于GraphQL与React减少API调用次数？

核心逻辑：统一查询入口 + 突变后缓存联动 #

单独定义GetUser查询作为用户全量数据的统一入口，结合Apollo Client的缓存机制，解决登录/注册后一次性拉取数据、更新后同步数据的问题，完全发挥GraphQL嵌套查询的优势。

具体实现步骤 #

1. 定义GetUser嵌套查询
   把用户所需的所有关联数据（shirts、designs）都嵌套进这个查询里，依赖请求头的认证Token自动识别当前用户，无需额外传参：

   query GetUser {
     currentUser {
       id
       username
       shirts {
         id
         name
         size
       }
       designs {
         id
         title
         imageUrl
       }
     }
   }
   

2. 登录/注册后立即触发GetUser
   在SignIn/SignUp mutation执行成功后，主动调用GetUser查询，把全量数据写入Apollo缓存：

   // 以SignIn为例
   const handleSignIn = async (userCredentials) => {
     await client.mutate({
       mutation: SIGN_IN_MUTATION,
       variables: userCredentials
     });
     // 登录成功后拉取用户全量数据
     await client.query({ query: GET_USER_QUERY });
   };
   

3. UpdateShirt后同步数据的两种方式

   • 方式一：手动更新缓存（性能最优）
     在mutation的update回调里，直接修改缓存中GetUser对应的shirt数据，避免全量重查：

     const handleUpdateShirt = async (updatedShirt) => {
       await client.mutate({
         mutation: UPDATE_SHIRT_MUTATION,
         variables: updatedShirt,
         update: (cache, { data: { updateShirt } }) => {
           const { currentUser } = cache.readQuery({ query: GET_USER_QUERY });
           const updatedShirts = currentUser.shirts.map(shirt => 
             shirt.id === updateShirt.id ? updateShirt : shirt
           );
           cache.writeQuery({
             query: GET_USER_QUERY,
             data: { currentUser: { ...currentUser, shirts: updatedShirts } }
           });
         }
       });
     };
     

   • 方式二：强制重查GetUser（实现简单）
     如果数据结构复杂，手动更新缓存容易出错，直接在mutation完成后指定重查该查询：

     const handleUpdateShirt = async (updatedShirt) => {
       await client.mutate({
         mutation: UPDATE_SHIRT_MUTATION,
         variables: updatedShirt,
         refetchQueries: [{ query: GET_USER_QUERY }]
       });
     };
     

4. 全局挂载用户数据
   在应用根组件（如App.js）中调用useQuery(GET_USER_QUERY)：

   • 登录状态下，缓存中会自动保存用户全量数据，所有子组件可以直接通过useQuery读取缓存，无需单独请求；
   • 未登录时，查询会返回空或认证错误，可在根组件直接处理跳转登录页的逻辑。

方案优势 #

• 完全复用GraphQL嵌套能力，一次性拉取所有所需数据，避免组件逐层请求；
• GetUser作为统一入口，不管登录后还是数据更新后，都用同一查询同步数据，逻辑统一；
• 充分利用Apollo缓存，减少不必要的网络请求，提升应用性能。

内容的提问来源于stack exchange，提问作者Rabbott