我的Reaction应用程序中有几个GQL查询.其中一个在出错时有一个奇怪的行为:钩子返回的结果与我在浏览器的网络选项卡中看到的结果不同.

以下是收到的内容(如在我的浏览器中看到的):

{
    errors: [
        {
            message: "very long message explaining the error",
            extensions: {}
        },
        {
            message: "very long message explaining the error",
            extensions: {}
        },
    {
            message: "very long message explaining the error",
            extensions: {}
        },
       (...)
    ],
    data: {
        elements: {
            edges: [
                {
                    id: "fakeElementId",
                    name: "fakeElementName",
                },
        {
                    id: "fakeElementId2",
                    name: "fakeElementName2",
                },{
                    id: "fakeElementId3",
                    name: "fakeElementName3",
                },
                (...)               
            ],
            totalCount: 22,
            __typename: "PaginatedElementsResponse"
        }
    }
}

如果我从钩子中记录相同查询的结果,下面是我看到的结果:

{
  called: true,
  client: { … },
  data: undefined,
  error: {
    Error: "very long message explaining the error very long message explaining the error very long message explaining the error (...)",
    clientErrors: [],
    columnNumber: 24,
    extraInfo: undefined,
    fileName: "myFileName",
    graphQLErrors: [
      {
        message: "very long message explaining the error",
        extensions: {}
      },
      {
        message: "very long message explaining the error",
        extensions: {}
      },
      {
        message: "very long message explaining the error",
        extensions: {}
      },
      (...)
    ],
    lineNumber: 426,
    message: "very long message explaining the error very long message explaining the error very long message explaining the error (...)",
    networkError: null,
    stack: "myStack",
  },
  fetchMore: BoundFunctionObject { … },
  loading: false,
  networkStatus: 8,
  observable: { isTornDown: false, queryId: "fakeId", queryName: "myElementsQuery", … },
  previousData: undefined,
  refetch: BoundFunctionObject { … },
  reobserve: BoundFunctionObject { … },
  startPolling: BoundFunctionObject { … },
  stopPolling: BoundFunctionObject { … },
  subscribeToMore: BoundFunctionObject { … },
  updateQuery: BoundFunctionObject { … },
  variables: { … },
}

错误在这里(嵌套在graphQLErrors名称下),但不是数据.我想要的是能够检索data中的内容,即使有错误.但现在,我似乎不能这么做.

推荐答案

You might need to check the error policy set in your GraphQL client configuration.
By default, Apollo Client (assuming you are using Apollo) does not include the data in the response object if any errors are present. To change this behavior, you can adjust the error policy in your query hook to 'all', which allows both data and errors to be returned.

您的查询挂钩将如下所示:

const { data, error } = useQuery(YOUR_QUERY, {
  variables: YOUR_VARIABLES,
  errorPolicy: 'all' // That line changes the error policy
});

这一修改通知阿波罗客户端在响应中包括数据和错误(如果有).


the comments中的OP FE-P个确认:

我还必须在查询中添加onCompleted,因为数据是空的,但是,是的,errorPolicy: "all"是解决方案.

onCompleted callback in a GraphQL query using Apollo Client是与errorPolicy等其他选项一起添加的选项.当查询成功完成并返回数据时,将触发该回调.对于处理成功的数据响应来说,它是一个有用的地方,尤其是在数据提取并可用后需要执行操作的情况下.

您的查询将是,包括onCompleted回调:

const { data, error } = useQuery(YOUR_QUERY, {
  variables: YOUR_VARIABLES,
  errorPolicy: 'all', // Include both data and errors in the response
  onCompleted: (receivedData) => {
    // Handle the successfully fetched data
    // 'receivedData' contains the data returned by the query
    console.log('Query completed with data:', receivedData);
  }
});

Here, onCompleted is a function that takes the fetched data as an argument (receivedData in this example). That function will be executed once the query successfully completes.
Note: onCompleted only triggers if the query successfully fetches data, and it does not trigger if the query results in an error.

注(二):onCompleted回调是可选的,通常用于额外的数据处理或在数据可用时触发副作用.

Typescript相关问答推荐

有没有办法适当缩小类型?

如何用不同的键值初始化角react 形式

React router 6.22.3不只是在生产模式下显示,为什么?

无法绑定ngModel.条件ngSwitchCase中的错误

Angular NgModel不更新Typescript

路由链接始终返回到

剧作家元素发现,但继续显示为隐藏

在保留类型的同时进行深层键名转换

使用TypeScrip5强制使用方法参数类型的实验方法修饰符

如何将TS泛型用于react-hook-form接口?

是否有可能避免此泛型函数体中的类型断言?

避免混淆两种不同的ID类型

为什么&Quot;元素隐式具有';Any';类型,因为...即使我已经打字了,也不能作为索引显示错误吗?

是否可以通过映射类型将函数参数约束为预定义类型?

如果判断空值,则基本类型Gaurd不起作用

为什么在这种情况下,打字脚本泛型无法正确自动完成?

类型判断数组或对象的isEmpty

TS不能自己推断函数返回类型

替换typescript错误;X类型的表达式可以';t用于索引类型Y;带有未定义

使用受保护的路由和入门来响应路由