标签: react-apollo

我正在使用 Apollo 与用 React 编写的 Web 应用程序中的 GraphQL 服务器进行交互。我正在尝试在应用程序中实现错误处理并为此依赖apollo-link-error。

现在，我需要处理两类错误：

1. 可以在执行 Apollo 查询或变异的组件中本地处理的错误，即我需要在其上显示上下文错误信息的无效表单字段
2. 可以全局处理的错误，例如通过在页面某处显示显示错误详细信息的 toast 通知

显然，一旦错误被本地处理我需要它不会在全球范围内处理，因为它并没有多大意义，显示错误消息旁边的一个表单字段和通过举杯消息一般错误。

我在尝试实现这个时遇到的第一个绊脚石是全局错误处理逻辑在本地错误处理逻辑之前触发，这使我无法在本地拦截错误，然后找到防止全局逻辑踢进来的方法.

我创建了 Codesandbox 示例，它ApolloClient以最简单的方式设置一个，使用 http 和错误链接，并使用该react-apollo Query组件对不存在的资源进行查询，从而产生错误。

我onError在Query组件的回调（因此是本地错误处理）和apollo-link-error处理程序（因此是全局错误处理）中处理错误，并将错误打印到控制台。

它表明全局错误处理逻辑在局部错误处理之前启动。我需要它是相反的。

我想向用户展示一些来自 graphql 服务器的错误。

有一些带有回调的组件，使用一些突变

onSave() => {
    this.props.mutate({
        mutation: CHANGE_ORDER_MUTATION,
        variables: {
            ids,
        },
    }).catch((e) => {
        console.log(e.graphQLErrors) <--- e.graphQLErrors is always empty array = []
    })
}

虽然我可以graphQLErrors通过apollo-link-error链接看到错误。

const errorLink = onError(({ graphQLErrors, networkError }) => { console.log(graphQLErrors) <--- errors from server });

我有一个next应用程序。该应用本身（的代码pages，static等等）是在回购一个文件夹中。称为frontend。应用程序。本身通过expressrepo 中的另一个文件夹通过服务器提供服务。称为backend。

首先，我不确定将这两个分开是否是最佳实践，但我个人喜欢这样做。两个文件夹都有各自的package.json和package-lock.json文件。

我还ApolloServer通过/graphql端点在后端快速服务器上运行。应用程序。工作正常，直到我尝试实现带有反应钩子的组件。即如下所示提供react-spring的非常简单的示例：

import { useSpring, animated } from 'react-spring'

function App() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

我已将其从Appto重命名，SpringDemo并在页面组件中简单地调用它，如下所示：

function Home() {
  return (
    <div>
      <SpringDemo />
    </div>
  )
}

export default Home

通过文件夹中的express服务器为我的应用程序提供服务时，我 …

我正在尝试将 Apollo 添加到应用程序中。我将使用它来获取数据，并希望遵循最佳实践并使用新的 API（从 Apollo 2.5 开始）来存储本地 UI 状态。

我一直在查看这些文档，但它们的 UI 状态比我想要实现的更简单。

我想移植我一直在 Redux 应用程序中使用的模式，其中许多 UI 元素的值集中存储。在 Redux 中，我有一个 reducer 对象用于存储我的 UI 值，如下所示：

{
  dropdowns: {
    someDropdown: [{ index: 0, value: 'Selected Value' }]
  },
  checkboxes: {
    someCheckbox: true
  }
}

如在，不同类型的元素被表示为对象，其中每个键是 UI 元素的唯一 ID，值根据元素类型而变化。

我也对上述的扁平化版本持开放态度，其中没有按 UI 元素类型划分的子类别。

我还有一个单独的 reducer 存储一些 UI 元素的状态，例如：

{
  openDropdownId: 'someDropdown',
  openModalId: null
}

至关重要的是，这些数据似乎包括其键不可预测的对象。我既不确定如何使用此类型输入gql，也不确定如何有效地获取此数据（请参阅问题底部）。

我试过用 Apollo Client 重现这个，但遇到了很多错误。这是我的客户端设置：

例如，对于下拉菜单，其想法是在states这里存储 open/closed state ，而values存储有关所选值的信息。

import { …

根据 Apollo GraphQL 文档，Apollo Links 可以有两个方向 - 客户端 -> 服务器和服务器 -> 客户端：

但是，我无法找到有关来自服务器 -> 客户端的链接的文档或示例。我的目标是捕获并解析将要存储在缓存中的传入数据。这样，我可以从缓存中读取自定义的解析数据。有可能实现这一目标吗？

我正在使用next.js和 apollo 与反应挂钩。

对于一个页面，我在服务器端渲染前 X 个“帖子”，如下所示：

// pages/topic.js

const Page = ({ posts }) => <TopicPage posts={posts} />;

Page.getInitialProps = async (context) => {
    const { apolloClient } = context;
    const posts = await apolloClient.query(whatever);

    return { posts };
};

export default Page;

然后在组件中我想使用useQuery钩子：

// components/TopicPage.js

import { useQuery } from '@apollo/react-hooks';

export default ({ posts }) => {
    const { loading, error, data, fetchMore } = useQuery(whatever);

    // go on to render posts and/or data, …

当我初始化我的 Apollo 客户端时，我创建了一个带有 header 的 Apollo Link hello: "world"。有没有办法hello使用钩子覆盖组件的标头值？我认为这会起作用，但它仍然使用 Client 标头：

useQuery(<QUERY>,{
    context:{
        headers:{
            hello: "Canada"
        }
    }
})

在 React Native apollo 客户端中调用突变时如何传递附加标头？

我的客户在这里：

import { HttpLink } from 'apollo-link-http';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const makeApolloClient = (token) => {
  // create an apollo link instance, a network interface for apollo client
  const link = new HttpLink({
    uri: 'http://x.x.x.x:xxxx/xxxx',
    headers: {
     Authorization: `Bearer ${token}`
    },
  });
  // create an inmemory cache instance for caching graphql data
  const cache = new InMemoryCache();
  // instantiate apollo client with apollo link instance and …

我开始从 Apollo Client 2.x 迁移到 3.x beta，但在使用 apollo 钩子和现已弃用的查询/变异组件时遇到了问题。

我正在使用这些软件包：

@apollo/client: 3.0.0-beta.4
@apollo/react-components: 3.1.3

在这种情况下，使用 apollo 挂钩可以正常工作，但是使用查询组件时，出现以下错误：

Invariant Violation 无法在上下文中找到“客户端”或作为选项传入。将根组件包装在 中，或通过选项传递 ApolloClient 实例。

我创建了一个代码沙盒，在这里显示了这个问题：https ://codesandbox.io/s/react-example-9p9ym

我认为问题出在ApolloProvider我正在使用的源上，但如果我想使用新的测试版，同时仍然使用查询组件，我不确定从哪个包中获取它。

突变

Mutation: {
  signUp: (_, { res }) => {
    try {
      res.cookie("jwt", "token", {
        httpOnly: true
      });
      return "Amasia";
    } catch (error) {
      return "error";
    }
  };
}

Apollo-clenet-反应

const [addTodo, { loading, error, data }] = useMutation(gql);

  const [formSignUp, setFormSignUp] = useState({
    lastName: '',
    firstName: '',
    password: '',
    email: '',
  });

  const change = e => {
    const { value, name } = e.target;
    setFormSignUp({ ...formSignUp, [name]: value });
  };

当我从反应中提出请求时。这是我从服务器得到的答案。

1)数据 {"data": {"signUp": "Amasia"}}

2)网络 …