标签: apollo-client

我一直试图解决这个问题，但没有找到一个强有力的答案。我正在尝试使用 useMutation 钩子执行登录突变。

TLDR；我想知道在选项中传递的 onError 和 useMutation 给我的错误之间到底有什么区别

这是我的代码片段

const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
        variables: {
            email,
            password
        },
        onError(err) {
            console.log(err);
        },
});

在服务器端，我有一个用于登录的预设/硬编码电子邮件，我没有使用 Apollo 或任何其他客户端。在此登录突变的解析器中，如果电子邮件不相同，我只会抛出一个错误

throw new Error('Invalid Email');

现在我想在客户端（React）处理这个错误。但我担心的是，如果我使用从 useMutation 钩子返回的“错误”并尝试以这种方式显示错误

render() {
...
{error && <div> Error occured </div>}
...
}

错误在 UI 中更新，但随后 React 立即向我显示了一个带有 Unhandled Rejection (Error): Graphql error: My-custom-error-message 的屏幕

但是，如果我使用 onError 传递给 useMutate 函数的选项，那么它不会向我显示这个屏幕，我可以对错误做任何我想做的事情。

我想知道传递给选项的 onError 和 useMutation 给我的错误之间到底有什么区别，以及为什么 React 在不使用onError 时向我显示错误屏幕。

谢谢！

我正在尝试从Redux Store迁移以使用Apollo Graphql 客户端附带的Apollo 客户端缓存。

将 Apollo Client 与其他数据管理解决方案区分开来的关键特性之一是其规范化缓存。只需设置 Apollo Client，您就可以获得开箱即用的智能缓存，无需额外配置。

使用 Redux，我们必须根据从副作用接收到的响应来编写动作、类型和分派动作，并使用 reducer 设置存储中的数据，这由 Apollo Client 自动完成。

问题：

1) 从 Redux 迁移到 Apollo Client Cache 有什么优势？

2) 在迁移到 Apollo Client Cache 之前，我应该担心什么吗？

在一个react本机项目中,我正在创建一个对象,然后将屏幕重定向到新创建的对象的详细信息页面,我收到此错误:

可能未处理的Promise拒绝(id:0):网络错误:存储错误:应用程序尝试编写没有提供id的对象,但商店已包含此对象的id为XYZ.

查看数据库,我看到在上一步中正确创建了该项.通过列表导航到同一屏幕和项目(不是在创建和重定向之后)似乎工作正常.我是否必须等待或以某种方式设置某种时间让阿波罗商店保持正确？

我正在使用标准的apollo客户端@graphql绑定/包装

GQL:

 query getEvent($eventId: ID!) {
    Event(id:$eventId) {
      id
      headline
      photo
      location
      startTime
      creator {
        username
        photo
      }
    }
  }
`;

这是一段代码片段

@graphql(getEventGql,{
  options: ({route}) => {
    console.log('route params', route.params);
    return {
      variables: {
        eventId: route.params.eventId,
      }
    }
  },
})

@connect((state) => ({ user: state.user }))
export default class EventDetailScreen extends Component {
...

安装 Apollo 后，我在尝试运行我的 React Native Expo 应用程序时遇到错误。我尝试删除节点模块并重新安装、重置缓存、重新启动计算机，但仍然没有成功。

Android 捆绑失败 456ms 尝试@apollo/client从文件 >解析模块时，成功找到/mnt/c/Users/14044/Desktop/Coding/divii/client/App.tsx包 > >。/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/package.json然而，这个包本身指定了一个main模块字段>无法解析>( /mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs。事实上，这些文件都不存在：

• /mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs(.native|.android.jsx|.native.jsx|.jsx|.android.js|. native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)
• /mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs/index(.native|.android.jsx|.native.jsx|.jsx|.android.js |.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)

我正在graphql通过react apollo提供的HOC 获取数据列表.例如:

const fetchList = graphql(
  dataListQuery, {
    options: ({ listId }) => ({
      variables: {
        listId,
      },
    }),
    props: ({ data: { loading, dataList } }) => {
      return {
        loading,
        list: dataList,
      };
    }
  }
);

我在受控的单选按钮组中显示列表,我需要默认选择其中一个项目.在id所选择的项目被保留在终极版商店.

那么,问题是如何selectedItem在查询成功返回后更新Redux存储(即设置)？

我想到了一些选择:

选项1

我应该APOLLO_QUERY_RESULT在Redux减速机上听动作吗？但这有点尴尬,因为那时我需要听两个APOLLO_QUERY_RESULT,APOLLO_QUERY_RESULT_CLIENT如果查询已经运行过.同时,也是operationName道具只在本APOLLO_QUERY_RESULT行动而不是APOLLO_QUERY_RESULT_CLIENT采取行动.因此,我需要剖析每一个APOLLO_QUERY_RESULT_CLIENT动作,以了解它的来源.是否有一种简单直接的方法来识别查询结果操作？

选项2

我应该发送一个单独的动作SELECT_LIST_ITEM,componentWillReceiveProps例如(使用重构):

const enhance = compose(
  connect(
    function mapStateToProps(state) { …

有人可以提供一个使用 Apollo Client 3.0 字段策略实现的分页示例。我一直在按照文档中的示例来实现无限滚动，但在我的控制台中，我收到以下警告：

The updateQuery callback for fetchMore is deprecated, and will be removed
in the next major version of Apollo Client.

Please convert updateQuery functions to field policies with appropriate
read and merge functions, or use/adapt a helper function (such as
concatPagination, offsetLimitPagination, or relayStylePagination) from
@apollo/client/utilities.

The field policy system handles pagination more effectively than a
hand-written updateQuery function, and you only need to define the policy
once, rather than every time you call fetchMore.

我对阿波罗相当陌生，我真的不知道如何以 …

这是我在这里的第一篇讨论帖子。我通过奥德赛学到了Apollo+ 。目前，我正在使用Next.js构建自己的项目，该项目需要从 2 个GraphQL 端点获取数据。GraphQL

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";

const client = new ApolloClient({
  ssrMode: true,
  link: createHttpLink({
    uri: "https://api.hashnode.com/",
    credentials: "same-origin",
    headers: {
      Authorization: process.env.HASHNODE_AUTH,
    },
  }),
  cache: new InMemoryCache(),
});

export default client;