标签: react-apollo

我一直试图解决这个问题，但没有找到一个强有力的答案。我正在尝试使用 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 时向我显示错误屏幕。

谢谢！

我有一个查询文件,如下所示:

import {gql} from 'react-apollo';

const queries = {
  getApps: gql`
    {
      apps {
        id
        name
      }
    }
  `,
  getSubjects: gql`
    {
      subjects {
        id
        name
      }
    }
  `
};

export default queries;

然后我将此文件导入到我的React组件:

import React, {Component} from 'react'
import queries from './queries'

class Test extends Component {
...
}

export default graphql(queries.getSubjects)(graphql(queries.getApps)(Test));

这将只获取其中一个查询(getApps)的数据,而不是两者.如果我一次做一个这样看起来像这样:

export default graphql(queries.getSubjects)(Test);

然后它工作,但我没有我的其他查询.是的,我已经单独测试了它们并且它们有效.如何获取它以便两个查询都显示在我的props.data中？

我正在使用apollo-client,apollo-link和react-apollo,我想完全禁用缓存,但不知道该怎么做.

我读了apollo-cache-inmemory它的源代码,它config的构造函数中有一个参数,但是我无法构建一个虚拟函数storeFactory来使它工作.

我一直在使用react-apollo和渲染道具方法。

这工作得很好，我的代码看起来像这样。

const App = () => {
   const [player, setPlayer] = React.useState(null);
   if (player) {
     return (
        <GetBroncosPlayerQuery variables={{ player }}>
           {({ data }) => {
              // do stuff here with a select box
            }} 
        </GetBroncosPlayersQuery>
     )
   }
}

现在，如果我尝试对useQuery钩子做同样的事情，当我的代码如下所示时，我会收到以下错误：

const App = () => {
   const [player, setPlayer] = React.useState(false);

   if (isBroncos) {
       const { data } = useQuery(GetBroncosPlayersQueryDocument, {
         variables: { player }
      });
      // do stuff here
   }
}

这给出了一个错误，你不能在条件语句中使用钩子。然后我实现了useLazyQuery但是这也不起作用，因为 …

在一个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 {
...

我正在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) { …

我有一个突变

mutation deleteRecord($id: ID) {
    deleteRecord(id: $id) {
        id
    }
}

在另一个位置我有一个元素列表.

我可以从服务器返回更好的东西,我该如何更新列表？

更一般地说,在apollo/graphql中处理删除的最佳做法是什么？

我在我的反应应用程序中使用apollo graphql.说我有以下查询:

query ListQuery($filter: String!) {
   items(filter: $filter) {
     id
     name
   }
}

此查询允许我使用过滤器查询项目列表.假设我使用过滤字符串A,然后使用过滤字符串B.缓存现在包含两个条目:ListQuery(A)和ListQuery(B).

现在让我们说我使用一个变异来添加一个新项目.如何从缓存中删除所有缓存的查询？所以在这种情况下,我想从缓存中删除ListQuery(A)和ListQuery(B).

我怎么能做到这一点？

有人可以提供一个使用 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.

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

我正在使用<Mutation />具有Render Prop API的组件并尝试在UI中执行乐观响应.

到目前为止,我在_onSubmit功能中有这个块-

createApp({
    variables: { id: uuid(), name, link },
    optimisticResponse: {
        __typename: "Mutation",
        createApp: {
            __typename: "App",
            id: negativeRandom(),
            name,
            link
        }
    }
});

我的<Mutation />组件看起来像 -

<Mutation
    mutation={CREATE_APP}
    update={(cache, { data: { createApp } }) => {
        const data = cache.readQuery({ query: LIST_APPS });
        if (typeof createApp.id == "number") {
            data.listApps.items.push(createApp);
            cache.writeQuery({
                query: LIST_APPS,
                data
            });
        }
    }}
>

{/* 
some code here
*/}

</Mutation>

我知道该update函数在<Mutation …