- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试通过Apollo Server Express和Passport JWT使用GraphQL构建微服务Web应用示例,以进行 token 认证。
到目前为止,我有4个微服务(用户,博客,项目,配置文件)和网关API,在其中将它们与关系的片段(例如Blog.author
或User.projects
等)拼接在一起。一切工作正常,我可以全面执行CRUD。
然后,当我尝试实现身份验证时,一切都陷入了困境(这真让人大吃一惊),尽管奇怪的是没有实现身份验证本身,这不是问题。
问题出在错误处理上,更具体地说,是将GraphQL错误从远程API传递到网关进行拼接。网关接收到一个错误,但是实际的详细信息(例如{password: 'password incorrect'}
)被网关API吞没了。
用户API错误
{
"errors": [
{
"message": "The request is invalid.",
"type": "ValidationError",
"state": {
"password": [
"password incorrect"
]
},
"path": [
"loginUser"
],
"stack": [
...
]
}
],
"data": {
"loginUser": null
}
}
{
"errors": [
{
"message": "The request is invalid.",
"locations": [
{
"line": 2,
"column": 3
}
],
"path": [
"loginUser"
],
"extensions": {
"code": "INTERNAL_SERVER_ERROR",
"exception": {
"errors": [
{
"message": "The request is invalid.",
"locations": [],
"path": [
"loginUser"
]
}
],
"stacktrace": [
"Error: The request is invalid.",
... // stacktrace refers to node_modules/graphql-
tools/src/stitching
],
"data": {
"loginUser": null
}
}
s';
import { ApolloServer } from 'apollo-server-express';
// ...
import errorHandler from '../error-handling/errorHandler';
// ... app setup
const startGateway = async () => {
const schema = await makeSchema(); // stitches schema
const app = express();
app.use('/graphql', (req, res, next) => {
// passport
// ...
});
const server = new ApolloServer({
schema,
context: ({ req }) => ({ authScope: req.headers.authorization }),
// custom error handler that tries to unravel, clean and return error
formatError: (err) => errorHandler(true)(err)
});
server.applyMiddleware({ app });
app.listen({ port: PORT }, () => console.log(`\n Gateway Server ready at http://localhost:${PORT}${server.graphqlPath} \n`));
};
startGateway().catch(err => console.log(err));
import { makeRemoteExecutableSchema, introspectSchema } from 'graphql-tools';
import { ApolloLink } from 'apollo-link';
import { setContext } from 'apollo-link-context';
import { introspectionLink, stitchingLink } from './link';
// graphql API metadata
const graphqlApis = [
{ uri: config.USER_DEV_API },
{ uri: config.BLOG_DEV_API },
{ uri: config.PROJECT_DEV_API },
{ uri: config.PROFILE_DEV_API }
];
// create executable schemas from remote GraphQL APIs
export default async () => {
const schemas = [];
for (const api of graphqlApis) {
const contextLink = setContext((request, previousContext) => {
const { authScope } = previousContext.graphqlContext;
return {
headers: {
authorization: authScope
}
};
});
// INTROSPECTION LINK
const apiIntroSpectionLink = await introspectionLink(api.uri);
// INTROSPECT SCHEMA
const remoteSchema = await introspectSchema(apiIntroSpectionLink);
// STITCHING LINK
const apiSticthingLink = stitchingLink(api.uri);
// MAKE REMOTE SCHEMA
const remoteExecutableSchema = makeRemoteExecutableSchema({
schema: remoteSchema,
link: ApolloLink.from([contextLink, apiSticthingLink])
});
schemas.push(remoteExecutableSchema);
}
return schemas;
};
const resolvers = {
Query: {/*...*/},
Mutation: {
loginUser: async (parent, user) => {
const errorArray = [];
// ...get the data...
const valid = await bcrypt.compare(user.password, ifUser.password);
if (!valid) {
errorArray.push(validationError('password', 'password incorrect'));
// throws a formatted error in USER API but not handled in GATEWAY
throw new GraphQlValidationError(errorArray);
}
// ... return json web token if valid
}
}
}
export class GraphQlValidationError extends GraphQLError {
constructor(errors) {
super('The request is invalid.');
this.state = errors.reduce((result, error) => {
if (Object.prototype.hasOwnProperty.call(result, error.key)) {
result[error.key].push(error.message);
} else {
result[error.key] = [error.message];
}
return result;
}, {});
this.type = errorTypes.VALIDATION_ERROR;
}
}
export const validationError = (key, message) => ({ key, message });
import formatError from './formatError';
export default includeStack => (error) => {
const formattedError = formatError(includeStack)(error);
return formattedError;
};
import errorTypes from './errorTypes';
import unwrapErrors from './unwrapErrors';
export default shouldIncludeStack => (error) => {
const unwrappedError = unwrapErrors(error);
const formattedError = {
message: unwrappedError.message || error.message,
type: unwrappedError.type || error.type || errorTypes.ERROR,
state: unwrappedError.state || error.state,
detail: unwrappedError.detail || error.detail,
path: unwrappedError.path || error.path,
};
if (shouldIncludeStack) {
formattedError.stack = unwrappedError.stack || error.extensions.exception.stacktrace;
}
return formattedError;
};
export default function unwrapErrors(err) {
if (err.extensions) {
return unwrapErrors(err.extensions);
}
if (err.exception) {
return unwrapErrors(err.exception);
}
if (err.errors) {
return unwrapErrors(err.errors);
}
return err;
}
最佳答案
Ok似乎已经在this discussion指向this gist的帮助下修复了该问题。这是一个拼接错误,其中包含一些不必要的错误格式。我从ApolloServer({})
中都删除了formatError,然后将./src/remoteSchema/index.js重新格式化为:
import { makeRemoteExecutableSchema, introspectSchema } from 'graphql-tools';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { onError } from 'apollo-link-error';
import fetch from 'node-fetch';
import config from '../../config/config';
// graphql API metadata
const graphqlApis = [
{ uri: config.USER_DEV_API },
{ uri: config.BLOG_DEV_API },
{ uri: config.PROJECT_DEV_API },
{ uri: config.PROFILE_DEV_API }
];
// create executable schemas from remote GraphQL APIs
export default async () => {
const schemas = [];
/*eslint-disable*/
for (const api of graphqlApis) {
let remoteLink = new HttpLink({ uri : api.uri, fetch });
let remoteContext = setContext((req, previous) => {
// if the authorization token doesn't exist, or is malformed, do not pass it upstream
if (
!previous.graphqlContext.authorization
||
!previous.graphqlContext.authorization.match(/^Bearer /)
) {
return;
}
return {
headers: {
'Authorization': previous.graphqlContext.authorization,
}
}
});
let remoteError = onError(({ networkError, graphQLErrors }) => {
if (graphQLErrors) {
graphQLErrors.forEach((val) => {
Object.setPrototypeOf(val, Error.prototype);
});
}
});
let remoteSchema = await introspectSchema(remoteLink);
let remoteExecutableSchema = makeRemoteExecutableSchema({
schema : remoteSchema,
link : ApolloLink.from([
remoteContext,
remoteError,
remoteLink
])
});
schemas.push(remoteExecutableSchema);
}
return schemas;
};
关于error-handling - 无法将已处理的GraphQL错误从一个Apollo服务器API传递到另一个API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55595592/
有没有全局loading react-apollo 客户端在任何地方都可以使用标志吗?我有一个“页面包装器”组件,我想在所有子组件都收到它们的数据后应用 ui 效果。 我已经使用 redux 设置了
我试图通过 React 了解 Apollo。如何将状态添加到我本地的 Apollo 商店? 我正在使用 meteor 。它在客户端提供了一个功能来测试用户是否登录并返回他们的 id 如果他们是 Met
我有一个关于 cacheRedirects 的问题在 Apollo 中,我有项目概览和详细 View 。我希望将 detailview 缓存重定向到概览中的一个项目(如文档中的 the book ex
我们可以使用查询和变异向服务器发出一些请求。在这些查询中,我们可以传递一些参数,并且在这两种情况下我们都会从服务器获得一些结果。唯一的一个强制性区别是,我们可以从 props 中调用突变,例如“thi
我正在使用 @apollo/client 实现,但我没有看到任何完整的 @apollo/client 示例与 react . 如果我搜索,我会得到示例 apollo-client和 apollo bo
我正在使用 apollo-client、apollo-link 和 react-apollo,我想完全禁用缓存,但不知道该怎么做。 我看了apollo-cache-inmemory的来源,它有一个 c
我正在构建基于 JWT 的身份验证系统. JWT已过期。当JWT过期,我 catch JWT使用 apollo-link-error 的过期错误.我想调用 apolloClient.resetStor
Apollo 文档 discusses the use of cacheRedirects 告诉 Apollo 如何从其他查询访问缓存中的数据。 它给出了一个例子: In some cases, a
react-apollo的Query组件可以使用Recompose吗? ? https://www.apollographql.com/docs/react/essentials/queries.ht
我正在尝试从“ apollo-server”更新:“^2.9.4”和 “阿波罗服务器 express ” :“^2.9.4”到 2.12.0 版本 在 typescript 中,在应用程序的构建过程中
http://dev.apollodata.com/react/mutations.html 我正在尝试使用 optimisticResponse,但我很困惑...无法让它在我的本地运行。 我的问题是
我正在制作一个社交网站。当任何用户在站点上更新或创建新内容时,我需要查看站点的任何其他用户来查看更改更新。 我有一些需要低延迟的评论,因此建议为此订阅。 我也有事件,但这些不需要这么低的延迟。每 10
我在一个简单的 React 应用程序中使用最新版本的 Apollo Client,我试图从用于显示返回的记录集大小的响应中提取 header 值。 我很欣赏这不是提供结果集大小的最优雅的方式,但这就是
我想在突变后使用乐观 UI 更新:https://www.apollographql.com/docs/react/basics/mutations.html 我对“乐观响应”和“更新”之间的关系感到
在 Apollo 服务器中,当客户端用户订阅订阅(使用 WebSocket)时,我们可以使用订阅解析器检测到这一点。 但是有没有办法检测取消订阅? 我看到 WebSocket 发送了一个 {"id":
我创建这个问题是为了防止有人对如何在 Apollo 中添加 union/多态类型感到好奇。希望这会让他们更容易。 在此示例中,我希望响应为 Worksheet 或 ApiError // typede
我的项目目录结构是这样的: - schema.graphql - package.json - packages -- types --- package.json --- src ---- grap
我想知道当订阅接收到新数据时是否有一种优雅的方式来触发react-apollo中查询的重新获取(数据在这里并不重要,将与前一个相同)。我只是在这里使用订阅作为通知触发器,告诉 Query 重新获取。
我使用 Apollo、React 和 Graphcool。我有一个查询来获取登录的用户 ID: const LoginServerQuery = gql` query LoginServerQ
出于分析目的,我想跟踪所有 graphql 操作的客户端(包括 @client 操作)。我无法在 API 中找到合适的选项,想知道这在 apollo 客户端级别是否可行,或者我是否需要引入一些代理来拦
我是一名优秀的程序员,十分优秀!