标签: apollo

我正在使用Scaphold.io来构建我正在开发的一个小应用程序的后端，并且在尝试更新单个变更请求中的多个项目时遇到了问题。

在 Scaphold 中，当您创建新类型时，会为常见操作创建更改：创建、更新和删除。

您无法重新定义这些更改或其输入类型的架构。在我正在工作的模型类型 ( card) 中，我立即获得了这些突变：

createCard(input: CreateCardInput!): CreateCardPayload

updateCard(input: UpdateCardInput!): UpdateCardPayload

deleteCard(input: DeleteCardInput!): DeleteCardPayload

该updateCardInput类型定义了以下字段：

listId: ID
description: Text
name: String
order: Int
id: ID!
clientMutationId: String

我能做的：更新一张卡

有了这个，我知道如何定义一个更新order单卡的突变：

mutation updateCardOrder($card: UpdateCardInput!) {
  updateCard(input: $card) {
    changedCard {
      id
      order
    }
  }
}

变量：

{
  "card": {
    "id": "Q2FyZDo4MzA=",
    "order": "1"
  }
}

我想要做的是：在一个突变中更新多张卡片

我得到了一些使用卡片列表 ( [card]) 作为输入的指针，但我不知道如何让它工作。

理想情况下，类似于：

mutation updateCardOrder($cards: UpdateCardInput!) {
  updateCard(input: $card) {
    changedCard …

我们正在使用 Apollo Client 构建一个离线的第一个 React Native 应用程序。目前我正在尝试在离线时直接更新 Apollo Cache 以乐观地更新 UI。由于我们离线，我们不会尝试在连接为“在线”之前触发突变，但希望 UI 在仍处于离线状态时触发突变之前反映这些更改。我们正在使用来自http://dev.apollodata.com/core/read-and-write.html#writequery-and-writefragment的 readQuery / writeQuery API 函数。并且能够通过 Reacotron 查看正在更新的缓存，但是，UI 不会更新此缓存更新的结果。

    const newItemQuantity = existingItemQty + 1;
    const data = this.props.client.readQuery({ query: getCart, variables: { referenceNumber: this.props.activeCartId } });
    data.cart.items[itemIndex].quantity = newItemQuantity;
    this.props.client.writeQuery({ query: getCart, data });

已设置 Apollo 服务器，并在使用 graphiql 时正确响应查询。

具有服务器端渲染的现有 react-redux 应用程序需要开始使用 graphql 并进行此查询。

此应用程序的一个组件已设置为执行相同的查询，它似乎在执行网络请求，但失败了 Error: {"graphQLErrors":[],"networkError":{},"message":"Network error: Failed to fetch"}

任何故障排除建议？

我希望能够在对象仍在创建时对其进行更新。

例如：假设我有一个待办事项列表，我可以在其中添加带有名称的项目。我还希望能够编辑项目的名称。

现在假设连接速度较慢的用户创建了一个项目。在这种情况下，我会触发一个创建项目突变并乐观地更新我的 UI。这很好用。目前没有问题

现在假设由于网络缓慢，创建项目突变需要一些时间。在那个时候，用户决定编辑他们刚刚创建的项目的名称。对于理想的体验：

1. UI 应立即更新为新名称
2. 新名称最终应该保留在服务器中

我可以通过等待创建变更完成（这样我可以获得项目 ID）来实现 #2，然后进行更新名称变更。但这意味着我的 UI 的一部分将保持不变，直到创建项目突变返回并且更新名称突变的乐观响应开始。这意味着 #1 不会实现。

所以我想知道如何使用 Apollo 客户端同时实现 #1 和 #2。

注意：我不想添加微调器或禁用编辑。我希望应用程序即使在连接速度较慢的情况下也能做出响应。

在反应登录组件中，我想在登录成功后重新获取和更新导航栏组件。

const loginUser = () => {
    props.mutate({
      variables: {
        input: { email, password },
      },
      refetchQueries: [{ query: GET_ME }],
    });
  };

我可以在网络选项卡中看到登录和重新获取，并且都以正确的状态返回 200。但是导航栏仍然显示旧数据。

这是我的导航栏组件。

export const Header = props => {
  return <div>Header {JSON.stringify(props.data)}</div>;
};

export default graphql(GET_ME)(Header);

和 apolloClient：

export const client = new ApolloClient({
  link: createHttpLink({
    credentials: 'include',
    uri: 'http://localhost:8080/api/graphql',
  }),
  cache: new InMemoryCache(),
});

我在我的服务器上使用 Apollo GraphQL，我正在尝试设计我的 GraphQL API。我遇到的一个问题是我是否应该更喜欢嵌套查询而不是根查询。

让我们在此示例中检查两者，其中当前用户me有许多invitations。

根查询

me {
    id
    name
}

invitations {
    id
    message
}

invitations为当前用户返回邀请的解析器。

嵌套查询

me {
    id
    name
    invitations {
        id
        message
    }
}

除了me使用后一种方法嵌套在用户对象中的邀请之外，这些应该实现相同的结果。我担心的是，如果这与 Apollo Client 顺利地工作以保持缓存一致。

设计 GraphQL 查询的推荐方法是什么？

我正在尝试通过 React with Apollo 进行一个非常基本的查询。

当我在 GraphiQL 中执行此查询时，我很好地得到了结果，但在我的应用程序中，我得到了一个未定义的数据对象。并显示错误消息：

网络错误：JSON 输入意外结束

查询是：

query {
    category(id: 3) {
        id
        children {
            id
            name
        }
    }
}

这是我的组件

import React, { Component } from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const CATEGORIES_LIST = gql`
    query CATEGORIES_LIST {
        category(id: 3) {
            id
            children {
                id
                name
            }
        }
    }
`;

class Cat extends Component {
    render() {
        return (
            <div>
                <p>Items!</p>
                <Query query={CATEGORIES_LIST}>
                    {payload => {
                        console.log(payload);
                        return <p>fetch …

我编写了一个 GraphQL 查询，如下所示：

{
  posts {
    author {
      comments
    }
    comments
  }
}

我想知道如何获取有关posts解析器中请求的子字段的详细信息。

我想这样做是为了避免解析器的嵌套调用。我正在使用 ApolloServer 的DataSourceAPI。

我可以更改 API 服务器以一次获取所有数据。

我正在使用 ApolloServer 2.0，也欢迎任何其他避免嵌套调用的方法。

我useQuery像这样使用钩子：

function Foo() {
  const { data, error, loading } = useQuery(MY_QUERY, { pollInterval: 1000 });

  return (
    <>
      <Bar/>
      <Baz/>
      {data}
    </>
  );
}

现在，无论是Bar与Baz使用相同的查询。Baz是一个侧边栏，我想在它处于活动状态时禁用轮询。

我有一个用于处理状态的全局减速器Baz，我像这样修改了它：

if (isSidebarOpen === false) {
  ...
  apolloClient.stop();
} else {
  // TODO
}

这会停止轮询，但我不知道如何在侧边栏关闭时重新激活它（即在else上面的块中）。

我这样做正确吗？是否有不同的方法可以使用 Apollo 切换 GraphQL 查询的轮询？

我正在使用 apollo-server-plugin-response-cache 包，像这样在服务器创建中设置

const responseCachePlugin = require('apollo-server-plugin-response-cache');
const server = new ApolloServer({
  // ...
  plugins: [responseCachePlugin()],
});

但是，我在文档中找不到如何在事件发生时从缓存中删除或更新值，例如突变查询。这如何在负责此的 GraphQL 解析器中实现？