如何在前端apollo-client

时间:2018-01-17 20:36:07

标签: javascript node.js reactjs koa apollo

我的前端使用apollo-client,在后端在请求后返回错误时抛出异常。

当节点服务器收到请求时,我使用koa中间件检查请求令牌的有效性。如果令牌有效,则将请求转发到下一个中​​间件。如果令牌无效,我想向客户端返回401拒绝访问错误。为此,我按照了Koa的错误文档located here

我写的错误处理中间件的代码:

function userIdentifier() {
  return async (ctx, next) => {
    const token = ctx.request.headers.authorization

    try {
      const payload = checkToken(token)
      ctx.user = {
        id: payload.userId,
        exp: payload.exp,
        iat: payload.iat,
      }
    } catch (error) {
      ctx.user = undefined
      ctx.throw(401, "access_denied")
      // throw new Error("access_denied")
    }

    await next()
  }
}

这似乎适用于后端,但不适用于前端。当前端收到此错误时,会发生JavaScript运行时错误。我不确定是什么原因引起的。

enter image description here

注意,意外的" a"是相同的" a"在ctx.throw(401, "access_denied")中找到。如果它是ctx.throw(401, "x"),则前端显示"意外的标记x"代替。

发生错误的前端代码:

enter image description here

为了解决这个问题,我按了Apollo's error handling documentation并使用了apollo-link-error

const errorLink = onError(props => {
  const { graphQLErrors, networkError } = props
  console.log("ON ERROR", props)
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    )
  if (networkError) console.log(`[Network error]: ${networkError}`)
})

然后我组合所有链接并创建Apollo客户端,如下所示:

const link = ApolloLink.from([errorLink, authLink, httpLink])

export const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
})

log中调试apollo-link-error的输出如下:

enter image description here

相关文件

有人似乎有identical error,但没有列出解决方案。

1 个答案:

答案 0 :(得分:0)

当我开始在后端使用此库时,我发现前端正确处理了错误:https://github.com/jeffijoe/koa-respond

仅使用ctx.unauthenticated()

但是我仍然想知道更多关于如何在没有插件帮助的情况下使用koa返回基于json / object的错误