【问题标题】:Apollo Client 3: query returns results in Chrome's Network tab, but undefined in my appApollo Client 3:查询在 Chrome 的网络选项卡中返回结果,但在我的应用程序中未定义
【发布时间】:2020-12-10 17:23:54
【问题描述】:

我正在使用@apollo/client v3 获取一些数据。在 Chrome 的网络标签(http 结果)中,我可以看到它返回数据和错误(我不担心错误,我现在知道为什么了。):

{
    data: {workItems: [,…]},…},
    errors: [{message: "Error trying to resolve position."
}

但是在我的应用中,data 返回 undefined。

这是我的客户端配置:

export const graphqlClient = new ApolloClient({
    cache: new InMemoryCache(),
    link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
            if (graphQLErrors) {
                graphQLErrors.forEach(error =>
                    console.log(
                        `[GraphQL error]: ${JSON.stringify(error, null, 2)}`
                    )
                )
            }
            if (networkError) {
                console.log(`[Network error]: ${networkError}`)
            }
        }),
        apolloLink
    ])
})

我的查询:

gql`
    query WorkItems($ppm: String) {
        workItems(where: { ppm: $ppm }) {
            ...WorkItemKanban
        }
    }
    ${workItemFragment.workItemKanban}
`

const useWorkItemListDataGraphql = (args: {
    query: DocumentNode
    variables: { parent: string } | { ppm: string }
}) => {
    const { variables, query } = args
    const { data, error, loading, refetch } = useQuery<
        { workItems: WorkItem[] },
        { parent: string } | { ppm: string }
    >(query, {
        pollInterval: 180000,
        variables
    })
  
    // data returns undefined, but error shows the same error as in Chrome's network tab
    return { ...data, error, loading, refetch }
}

我不确定从哪里开始找出问题所在。在没有错误的情况下加载数据是可行的,但我认为这不是正常行为,它应该始终加载与我在 Chrome 选项卡中看到的相同。

【问题讨论】:

    标签: react-apollo apollo-client


    【解决方案1】:

    Apollo documentation - Error policies中所述

    默认情况下,错误策略将任何 GraphQL 错误视为网络错误并结束请求链

    因此默认情况下,如果出现错误,Apollo 客户端会返回undefined

    在查询选项或客户端默认选项中添加errorPolicy: 'all' 即可解决问题。

    例子:

    const { loading, error, data } = useQuery(MY_QUERY, { errorPolicy: 'all' });
    

    【讨论】:

    • 就我而言,我一直在开发工具网络选项卡中看到errors,但我的查询errors 会返回undefined,即使使用errorPolicy: 'all'。可能还有其他一些隐藏的设置...?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-06-08
    • 2021-05-09
    • 2021-02-13
    • 2021-02-23
    • 1970-01-01
    • 2022-01-09
    • 1970-01-01
    相关资源
    最近更新 更多