标签: react-apollo

我正在围绕Auth0锁小部件的实现做一些业务逻辑,并且需要调用一些graphql突变来登录.在这种情况下,没有要呈现的UI,因为它只是调用Auth0的lock.show()方法.但是,查看所有带有react的apollo客户端示例 - graphql方法似乎将函数绑定到组件.

• 我可以直接调用gql变异而不将其绑定到反应组件吗？
• 如果我不在组件中,那么从ApolloProvider获取客户端的最佳方法是什么？是否有我可以从ApolloProvider引用的静态单例实例,还是需要从根应用程序组件传递客户端引用？

我很困惑.

假设我目前有以下查询:

export const getPokemon = gql`
  query getPokemon($filters: AssetFilters) {
    pokemon(filters: $filters) {
      name,
      generation,
      exp
    }
  }`;

默认情况下,不传递任何过滤器,因此返回所有内容.

现在,我想用过滤器重新获取:

this.props.refetch({
  filters: {
    generation: '3rd'
  }
});

以上似乎覆盖了原始查询的本地缓存!

我正在编写一个离线优先应用程序,我希望这些不同的过滤排列可以单独缓存,而不是覆盖原始缓存.

我如何克服这个缓存难题并让Apollo分别用不同的参数缓存这些查询？

我遇到了错误：永久违反：在Query上下文中或作为传递的道具找不到“客户端”。将根组件包装在

然后我在测试时用prop客户将组件包装在apollo提供程序中。

TypeError: this.client.watchQuery is not a function

  732 |
  733 |   it('should close the overlay when the close button is clicked', () => {
> 734 |     const mandateBatchWrapper = mount(
  735 |       <ApolloProvider client={clientForApollo}>
  736 |         <MandateBatch
  737 |           data={data}

我有一个组件名称，Graph.js代码如下：

import React, { Component } from "react";
import { View, Text } from "react-native";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import Launches from "./Launches.js";
const client = new ApolloClient({
  uri: "http://127.0.0.1:4000/graphql"
});

export default class Graph extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <ApolloProvider client={client}>
        <View>
          <Text>Hello Apillo</Text>
        </View>
        <Launches />
      </ApolloProvider>
    );
  }
}

另一个文件名是Launcher.js下面给出的代码：

import React, { Component } from "react";
import …

Apollo 的<Mutation>组件通常运行良好，但有时您需要在render()方法。

在某些情况下，您可以简单地传递突变函数，如下所示：

import React, { Component } from "react";
import { DO_MUTATION } from "./mutations";
import { Mutation } from "react-apollo";

export default class MyComponent extends Component {
    render() {
        return (
            <Mutation mutation={DO_MUTATION}>
                {(doMutation) => (
                    <Button
                        onPress={() => {
                            this.handleSomething(doMutation);
                        }}
                    />
                )}
            </Mutation>
        );
    }

    handleSomething = (doMutation) => {
        /* DO SOME STUFF */
        doMutation();
    };
}

但在其他情况下，这不是一个非常合理的选择，例如：

import React, { Component } from "react";
import { DO_MUTATION } from "./mutations"; …

当我useMutation与 react native 一起使用时，出现未处理的承诺拒绝错误。这是产生问题的代码：

const [createUser, { error, loading }] = useMutation(CREATE_USER_MUTATION);

每当我的 graphql 服务器向客户端返回错误时，我都会收到未处理的承诺拒绝错误（下面的屏幕截图）。我可以通过添加这样的错误处理程序来让它消失，但这似乎是一个黑客。有什么想法吗？我做错了什么还是阿波罗人应该解决这个问题？

const [createUser, { error, loading }] = useMutation(CREATE_USER_MUTATION, {
  onError: () => {}
});

我无法通过以下提到的方式使用 useQuery 获取数据

const { data:data1 } = useQuery(Get_Doctor);
const {  loading, error,data } = useQuery(GET_Branch);

我终于设法让 Next.js 中的 SSR 与 @apollo/react-hooks 一起工作，但目前我需要用 包装每个页面withApollo，例如：

export default withApollo(IndexPage)

完整来源：https : //github.com/tomsoderlund/nextjs-graphql-hooks-boilerplate/blob/master/pages/articleList.js

如何将withApolloHOC提升到 _app.js 或 _document.js？

我需要使用 reactjs 和 apollo-client 为在线商店制作购物车。如何使用带有 localStorage 的 apollo-client 保存数据？

我正在使用 React 的钩子，我希望有一个从数据库中检索到的值作为初始值。但是，我收到以下错误：

Invariant Violation：Invariant Violation：比上一次渲染时渲染了更多的钩子。

const { data, loading, error } = useQuery(GET_DATA)
const { initialValue } = data
const [value, setValue] = useState(initialValue)

我正在使用 React Apollo 钩子。

更新

export default NotificationScreen = ({ navigation }) => {
    const { data: initialNotificationSettings, loading: loadingInitialSettings, error: initialSettingsError } = useQuery(GET_NOTIFICATION_SETTINGS)
    if (loadingInitialSettings) {
        return (
            <View style={[styles.container, styles.horizontal]}>
                <ActivityIndicator size="large" color="#FF5D4E" />
            </View>
        )
    }
    if (initialSettingsError) return <Text>Error...</Text>

    const {
        borrowerLendingNotificationToken,
    } = initialNotificationSettings.me
    const [borrowerPending, notifyBorrowerPending] = useState(borrowerLendingNotificationToken) …