标签: apollo

我正在使用Apollo Stack graphql-server-express和apollo-client.

因为我的后端不完美,所以可能会出现错误,因此我必须对该路径的错误请求做出响应.

直到现在我的主要问题是身份验证,因此我回复了一个错误.

return new Error(`${data.status}: ${data.statusText} @ ${data.url}`)

在前端,我使用apollo-client查询数据.

return apollo
        .query({query: gql`
            query {
                ${query}
            }`,
            forceFetch: forceFetch
        })
        .then(result => { debugger; return result.data })
        .catch(error => { debugger; console.error(error); });

但是,如果查询的一个属性响应错误,则只调用catch函数.即使是剩余属性的数据也会被转移,我在Chrome开发工具的网络标签中看到了这一点.In不是catch函数中的错误对象.

我的尝试与GraphiQL一起使用,我在同一个对象中获取错误和数据.

那么如何在不丢失整个请求的情况下为属性抛出错误呢？

我有这个代码:https://codesandbox.io/s/507w9qxrrl

我不明白:

1)如何在以下后重新渲染()Menu组件:

this.props.client.query({
  query: CURRENT_USER_QUERY,
  fetchPolicy: "network-only"
});

如果我登录()我希望我的Menu组件重新渲染()本身.但没什么.只有当我点击Home链接时,它才会重新渲染().我怀疑是因为我用它来渲染它:

<Route component={Menu} />

在反应路由器道具中拥抱它.这是错的吗？

另外,如果this.props在login()我看到loading: true永远之后检查菜单.为什么？

2)如果未经过身份验证,如何防止Menu组件查询(例如:localStorage中没有令牌); 我在Menu组件中使用此代码:

export default graphql(CURRENT_USER_QUERY)(Menu);

3)这是正确的方法吗？

在我通常的经验中，我使用的所有单页应用程序都使用 JWT 作为身份验证机制。我遇到了为此使用 httpOnly cookie 的 api。

由于我们无法通过 javascript 访问此类 cookie 以了解它是否存在，那么如何在 react 应用程序中处理此问题？

我最初的想法是通过sessionStorage在成功登录时设置一些并在收到与身份验证相关的错误时将其删除来跟踪这一点。

但是我相信这不适用于 next.js 服务器端渲染？我们用 apollo 客户端设置了它，它允许设置自定义标头和缓存。

有没有一种通用的方法可以通过上面的设置来处理这个身份验证过程？

我在Create React App中测试一个返回查询组件的组件时遇到了一些问题,我正在使用jest和酶进行测试.我得到的错误是 Invariant Violation: Unable to find node on an unmounted component..我做错了什么想法？我想要的是测试查询组件将根据从服务器接收的数据返回组件数组.

我尝试使用这篇中篇文章中发布的方法,但我根本无法使用它.

// The component

export class MyWrapper extends React.Component {
  render() {
    return (
        <List divided verticalAlign="middle" >
          <Query query={query} >
            {({ data, loading, error, refetch }) => {
              if (loading) return <Loader />;
              if (error) return <ErrorMessage />;

              // set refetch as a class property
              this.refetch = refetch;

              return data.response
                .map(el => (
                  <MyComponent
                    el={el}
                  />
                ));
            }}
          </Query>
        </List>

    );
  }
} …

今天早上,当我尝试使用react-native-fluid-transitions在场景之间实现流体导航时,我遇到了这个问题.我更换后createStackNavigator,createFluidNavigator或者FluidNavigator我得到了下面的屏幕问题:

这是我的文件

index.js

 import React from 'react';
    import { Platform } from 'react-native';
    import {
    SafeAreaView,
    createStackNavigator,
} from 'react-navigation';
import screens from '../screens';
import AppDrawer, {
  contentOptions as appDrawerContentOptions,
} from '../components/AppDrawer';
import { createFluidNavigator, FluidNavigator } from 'react-navigation-fluid-transitions';

// We already have a status bar from expo
if (Platform.OS === 'android') {
  SafeAreaView.setStatusBarHeight(0);
}

const defaultStack = createFluidNavigator (
  {
    Home: {
      screen: screens.CpfCheckScreen
    },
    Login: {
      screen: screens.LoginScreen
    },
    SelectAssociate: { …

我正在考虑实现同时包含错误和数据的 graphql 响应的方法。

是否可以在不创建包含error?

例如

MutationaddMembersToTeam(membersIds: [ID!]! teamId: ID!): [Member]将成员添加到某个团队。假设这种突变被称为有以下membersIds：[1, 2, 3]。

id为1和2的成员已经在团队中，所以必须抛出无法添加这些成员的错误，但应该添加id为3的成员，因为他不在团队中。

我正在考虑使用，formatResponse但似乎我无法在那里得到错误。

是否可以在不向返回类型添加错误字段的情况下解决此问题？

可以使用 终止实际的 HTTP 服务器实例server.close(callback)，但我不确定任何挂起的 WebSocket 操作（通过 WebSocket 运行的突变或查询）会发生什么。由于 http.Server 对 WebSocket 操作一无所知，它可能会忽略它们。如何正确确保当收到 SIGTERM 时，服务器停止接受新请求/webSocket 连接，完成挂起的连接然后关闭？

用谷歌找不到任何关于此的信息。

我正在使用 Jest 测试 Apollo 服务器RESTDataSource。我的应用程序是用 TypeScript 编写的。我的类CDCDataSource扩展了抽象类RESTDataSource，它本身扩展了抽象类DataSource。 具有允许您从外部 REST 数据源提取数据的RESTDataSource方法。get我希望模拟这个方法，因为我希望模拟外部数据源。

  protected async get<TResult = any>(
    path: string,
    params?: URLSearchParamsInit,
    init?: RequestInit,
  ): Promise<TResult> {
    return this.fetch<TResult>(
      Object.assign({ method: 'GET', path, params }, init),
    );
  }

然而，当我尝试使用 Jest 来模拟这个方法时spyOn——遵循这里的第二个答案：Jest：如何模拟类的一个特定方法——

import CDCDataSource from '../CDCDataSource';

test('Test', () => {
    let dataSource = new CDCDataSource();
    let spy = jest.spyOn(dataSource, 'get').mockImplementation(() => 'Hello');
    expect(dataSource.get()).toBe('Hello');

但是，我收到 TypeScript 错误

TS2768：没有重载与此调用匹配

越过 …

我正在浏览 Apollo React hooks 的文档。

并看到有两个查询钩子用于它们是useQuery和useLazyQuery

我正在阅读此页面。 https://www.apollographql.com/docs/react/api/react/hooks/

有人可以解释一下它们之间有什么区别，在这种情况下应该使用它。

一些背景：我有一个组件在加载时立即调用 useQuery 挂钩。当该查询运行时，我旋转一个加载微调器。一旦完成，我就会根据数据渲染内容。

我添加了一个useEffect挂钩来监视查询结果并记录数据，这就是我观察此问题的方式。

为了简化事情，它的工作原理如下：

export default function MyComponent(props: ???) {
    const result = useQuery(INITIAL_DATA_QUERY, { variables: { id: 1 } });

    React.useEffect(() => console.log(JSON.stringify({
        loading: result.loading,
        data: result.data,
        error: result.error,
    })), [result]);

    if (result.loading) return <LoadingScreen message="Fetching data..."/>;
    else if (result.error) return <ErrorPage/>
    else return <Stuff info={result.data}> // omitted because it's unimportant to the issue
}

当我在野外运行这个组件时，一切都完全按预期工作。它通过 Apollo 使用 GraphQL 到达端点，根据结果做出渲染决策等。

当我尝试模拟请求时，result.data和result.error字段永远不会改变，即使该result.loading字段发生了变化。我正在用来react-testing-library运行测试。

我的测试如下所示：

it("should load the data then render …