标签: react-apollo

我有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 …

我有一个简单的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 …

loadingreact-apollo客户端是否有可用的全局标志？我有一个"页面包装器"组件,我想在所有子组件都收到他们的数据之后应用ui效果.

我已经使用redux设置了apollo,因此可以随时访问商店(http://dev.apollodata.com/react/redux.html)

我可以很容易地dispatch说明从apollo接收数据的每个组件的更改,但是我希望这个page wrapper组件不知道它的子节点或它们的查询.

我已经调查了使用withApollo- http://dev.apollodata.com/react/higher-order-components.html#withApollo - 但是没有看到全局的api is loading.

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

我遇到一种情况，有时我想查询包含几个字段的许多对象的列表，有时只查询一个包含很多字段的对象。例如，请考虑以下两个查询：

• 具有许多对象和少数字段的查询：

  query {
    object(many=true) {
      id
      name
    }
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 具有单个对象和多个字段的查询：

  query {
    object(many=false) {
      id
      ... (many other fields)
    }
  }
  

  Run Code Online (Sandbox Code Playgroud)

我不想在第一个查询中请求多余的字段，因为这将导致请求中包含大量数据（否则，我可以使字段相同，例如，使用a来fragment解决我的问题）。

问题是：存储在缓存中的数据已根据__typename和进行规范化和存储id。这意味着如果查询相同，则查询或查询的原子将相互覆盖。因此，如果第二个查询最后发生，则数据库中的项目没有name与第一个查询关联的组件所必需的字段。

最简单的解决方案就是也要name在第二个查询中提出要求。问题在于，这似乎很脆弱且容易出错。例如，一个人可能创建了第三个查询，却忘记了在name那里查询。

另一个选择是使它们具有不同__typename的，即在后端区分它们。但这似乎是人为的。这些查询实际上是在处理相同类型的对象。

有没有规范的方法可以解决这个问题？

根据文档，我应该能够模拟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} …

我正在使用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
  }
});

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

我正在尝试向 FlatList 添加无限滚动功能：

<FlatList
   data={pickupsGroups}
   renderItem={({item , index}: {item: PickupGroup, index: number}) => {
                    return <PickingCard group={item} onPress={onPressPickup}/>
   }}
   onRefresh={onRefresh}
   keyExtractor={item => `${item?.title}-${item?.totalSku}`}
   refreshing={refreshing}
   onEndReached={() => {
     setPage(page + 1)
   }}
   onEndReachedThreshold={0.1}
/>

当page更改时，我运行 GraphQL 查询：

    const {loading} = useQuery(MY_GROUPS, {
        variables: {limit: 10, page},
        fetchPolicy: "network-only",
        onCompleted: data => {
            setPickupsGroups(pickupsGroups.concat(data.myPickupGroups.pickupGroups))
        }
    })

但每次我向 中添加新项目时pickupGroups，FlatList 都会滚动回顶部

我最近刚刚开始学习 GraphQL 和 React-Apollo，我想知道如果我需要在同一个组件中使用useQuery和挂钩，推荐的使用方法是什么。useMutation由于两个钩子都返回{data, loading, error}对象，因此名称存在冲突。我应该在解构时为属性分配唯一的名称，还是将逻辑移动到单独的容器组件更好？

我有一个带有 React 和 Apollo Client 的前端，并且正在尝试编写一些简单的测试。

我的应用程序如下所示：

ApolloProvider.js

import React from "react"
import App from "./App"
import ApolloClient from "apollo-client"
import { InMemoryCache } from "apollo-cache-inmemory"
import { createHttpLink } from "apollo-link-http"
import { ApolloProvider } from "@apollo/react-hooks"
import { setContext } from "apollo-link-context"

const httpLink = createHttpLink({
  uri: "...backend....",
})

const authLink = setContext(() => {
  const token = localStorage.getItem("jwtToken")
  return {
    headers: {
      Authorization: token ? `Bearer ${token}` : "",
    },
  }
})

const client = new ApolloClient({ …