如何向Apollo的query方法传递参数查询登录用户的专属待办

问题原因 #

1. useEffect语法错误：当前代码没有给useEffect传入正确的回调函数，直接执行了dispatch逻辑，会导致渲染过程中就发起请求，而非组件挂载/更新后执行。
2. 依赖项缺失：useEffect的依赖数组只包含dispatch，未加入loggedUserId。如果组件初始化时loggedUserId还未完成赋值（比如用户登录状态是异步获取的），第一次执行请求时传给后端的loggedUserId是undefined/空值，触发GraphQL参数$loggedUserId: String!的非空校验规则，直接拒绝请求，所以查询失败。硬编码时参数固定为有效值，因此可以正常返回结果。
3. 可选排查项：检查gql模板语法是否正确，你提供的原始代码中存在将对象闭合符号}误写入gql模板的问题，会导致query语法异常。

解决方案 #

按照以下步骤修改即可：

• 第一步：修正useEffect的语法，将执行逻辑包裹在回调函数内，同时把loggedUserId加入依赖数组，新增参数合法性判断，仅当loggedUserId有有效值时才发起请求。
  修正后的组件代码：

useEffect(() => {
  if (loggedUserId) {
    dispatch(todoThunk.getTodoItems(loggedUserId));
  }
}, [dispatch, loggedUserId])

• 第二步：修正todoService的gql模板语法，避免多余符号混入：

import { gql } from '@apollo/client';

export const todoService = {
  getTodoItems: () => gql`
    query todoQuery($loggedUserId: String!) {
      todo(where: { userId: { _eq: $loggedUserId } }, order_by: { createdAt: desc }) {
        id
        todo {
            title,
            body,
            status
        }
        userId
      }
    }
  `
}

• 第三步（可选）：在thunk中新增参数校验，提前拦截非法参数，方便排查问题：
  修正后的thunk代码：

import { createAsyncThunk } from '@reduxjs/toolkit';
import { apolloClient } from '@/Apollo';
import { todoService } from './_graphql';

export const todoThunk = {
  getTodoItems: createAsyncThunk(`db/getTodoItems`, async (loggedUserId: string, { rejectWithValue }) => {
    if (!loggedUserId) {
      return rejectWithValue('用户ID不能为空');
    }
    const response = await apolloClient.query({
      query: todoService.getTodoItems(),
      variables: { loggedUserId },
      fetchPolicy: `network-only`,
    });
    return response;
  }),
}

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