标签: react-apollo

我有一个称为React的组件HandleQuery，可以处理Apollo GraphQL查询的结果：

import React, { ReactNode } from 'react';

import { CenteredMessage } from './centered-message';

export interface HandleQueryProps {
    loading: boolean,
    error?: Error,
    children: ReactNode
}

export const HandleQuery = ({ loading, error, children }: HandleQueryProps) => {
    if (loading) {
        return <CenteredMessage>Loading...</CenteredMessage>;
    }

    if (error) {
        return <CenteredMessage>{error.message}</CenteredMessage>;
    }

    return children;
};

当此组件在另一个组件中使用时，不会编译：

import React from 'react';

import { useQuery } from 'react-apollo-hooks';
import gql from 'graphql-tag';
import { HandleQuery } from '..';
import { MutationType } …

我有getMovies查询和addMovie变异工作。addMovie但是，如果发生这种情况，我想知道如何最好地更新“编辑电影”和“我的个人资料”中的电影列表以反映所做的更改。我只需要一个一般/高级概述，或者甚至只是一个概念的名称（如果很简单）就如何实现这一目标。

我最初的想法只是在Redux商店中保存所有电影。突变完成后，它应该返回新添加的电影，我可以将其连接到商店中的电影。

在“添加电影”之后，它将弹出回到“编辑电影”屏幕，您应该可以在其中看到新添加的电影，然后，如果您返回“我的个人资料”，它也会在那里。

除了将其全部保存在自己的Redux商店中，还有更好的方法吗？有什么我不知道的阿波罗魔法可以为我处理此更新吗？

编辑：我发现了以下想法updateQueries：http : //dev.apollodata.com/react/cache-updates.html#updateQueries我认为这是我想要的（请告诉我这是否是不正确的方法）。这似乎比使用我自己的Redux存储的传统方式更好。

// this represents the 3rd screen in my picture
const AddMovieWithData = compose(
  graphql(searchMovies, {
    props: ({ mutate }) => ({
      search: (query) => mutate({ variables: { query } }),
    }),
  }),
  graphql(addMovie, {
    props: ({ mutate }) => ({
      addMovie: (user_id, movieId) => mutate({
        variables: { user_id, movieId },
        updateQueries: {
          getMovies: (prev, { mutationResult }) => {
            // my mutation …

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

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

我有一个简单的react组件,当用户提出请求时,必须从服务器加载数据.问题是我不知道如何传输动态变量speakerUrl并在组件加载状态之前访问它.当然我可以从中访问它this.props.params,但组件未加载,当我进行graphql查询时我无法访问它.查询 - QuerySpeaker当我手动设置url变量时工作正常.

路由器

<Route path="/speaker/:speakerUrl" component={SpeakerPage} />

组件 - SpeakerPage

import React from 'react';
import { graphql } from 'react-apollo';

import { QuerySpeaker } from '../redux/graphql/querys';

class SpeakerPage extends React.Component {
    render( ) {
        console.log( this.props );
        return (
            <div className="ui container">
                <div className="ui grid">
                    <div className="row">
                        Hello
                    </div>
                </div>
            </div>
        )
    }
}

export default graphql(QuerySpeaker, {
     options: ({ url }) => ({ variables: { url } }) <- here is my problem, how can …

我有一个带有消息列表的线程，该消息列表是通过GET_THREAD_MESSAGES查询获取的。该查询是分页的，具体取决于用户是否之前看到该线程，可能会加载第一页，最后一页或仅加载新消息。（即first/after/before/last可以使用任何值传递）

thread(id: "asdf") {
  messageConnection(after: $after, first: $first, before: $before, last: $last) {
    edges {
      cursor
      node { ...messageInfo }
    }
  }
}

现在我有一个sendMessage突变，我称之为，然后在该update突变的方法中，我想乐观地将发送的消息添加到线程消息中，以获得更好的UX。没有分页，我知道我会这样做：

const data = store.readQuery({
  query: GET_THREAD_MESSAGES,
  variables: { id: message.threadId }
})

data.messageConnection.edges.push(newMessageEdge);

store.writeQuery({
  query: GET_THREAD_MESSAGES,
  variables: { id: message.threadId },
  data,
})

不幸的是，由于我知道有分页，因此该store.readQuery调用会引发一个错误，提示“它找不到该messageConnection线程的字段”，因为该字段现在类似于messageConnection({ after: 'jfds1223asdhfl', first: 50, before: null, last: null })。在阿波罗文档说，你应该用@connection指令的查询工作，解决这一问题。我试图将查询更新为如下所示：

thread(id: "asdf") {
  messageConnection(...) @connection(key: …

我正在研究react-apollo通过graphql调用数据的反应应用程序当我检查浏览器网络选项卡响应它显示数组的所有元素不同但我得到的或console.log()在我的应用程序然后所有元素的数组与第一个元素相同.我不知道如何解决请帮助

我遇到了错误：永久违反：在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}

根据文档，我应该能够模拟graphql错误以进行测试。

To simulate GraphQL errors, simply define errors along with any data in your result.

const dogMock = {
  // ...
  result: {
    errors: [{ message: "Error!" }],
  },
};

但是，该错误导致我的测试完全失败。对于查询，它可以按预期工作，但是文档说，它对Mutation也一样。

为了简单起见，这里没有显示突变的错误情况，但是测试Mutation错误与测试Query错误完全相同：只需将错误添加到模拟中，触发突变，并检查UI以获得错误消息。

这是我的代码...

零件

class Example extends Component {
  state = {email: ''};

  render() {
    return (
      <div>
        <Mutation mutation={EXAMPLE_MUTATION} variables={this.state}>
          {(signin, {error, loading}) => {
            if(error)
              return <p data-test="graphql-error">{error.message}</p>;

            return (
              <form method="post" onSubmit={async e => {
                e.preventDefault();
                await signin();
                this.setState({email: ''});
              }}>
                <fieldset disabled={loading} …

我有一个组件名称，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 …

我正在使用graphql作为后端在不同部分上运行的react应用程序使用setupProxy为我的react应用设置代理服务器，这样做HTTP链接代理工作正常，但WebSocket链接代理给我一个错误

为了解决该问题，我尝试将选项包括为ws：true，但这是行不通的。错误如下：SyntaxError：无法构造'WebSocket'：URL'/ ws'无效。

错误：

setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(proxy("/graphql", { target: "http://localhost:8001/graphql" }));
  app.use(
    proxy("/ws", {
      target: "ws://localhost:8001",
      ws: true,
    })
  );
};

index.js

import { WebSocketLink } from "apollo-link-ws";
import { createUploadLink } from "apollo-upload-client";
//Apollo Imports End

// Declaring constants for GraphQL
const httpLink = new createUploadLink({
  uri: "/graphql"
});

const wsLink = new WebSocketLink({
  uri: "/ws",
  options: {
    reconnect: true
  }
});

我希望该呼叫应与普通呼叫相同，但会引发错误。