标签: react-apollo

我需要一些帮助来弄清楚订阅和实时更新的一般方法是什么。我有一个 React Native 应用程序，并使用 Apollo 和 Graphcool 服务作为后端。

在某些情况下，查看应用程序的用户会收到推送通知，告知某些内容已发生更改。当然，屏幕数据也应该更新。订阅显然是这项工作的候选者，我基本上让它发挥了作用。

我有一个像这样的订阅，它本身工作得很好（用于在谷歌地图上定位玩家头像）。

subscription PlayerMap($gameId: ID) {
  Game(filter: { mutation_in: [CREATED, UPDATED], node: { id: $gameId } }) {
    node {
      players {
        id
        character {
          id
          name
        }
        user {
          id
          latitude
          longitude
        }
      }
    }
  }
}

然后有一个不同的应用程序屏幕createPlayer与refetchQueriesApollo 一起执行突变（为了简单起见），它运行此查询来更新内容。

query GameCharacters($gameId: ID!) {
  Game(id: $gameId) {
    players {
      id
      character {
        id
        name
      }
    }
  }
}

现在，当此操作完成时，订阅查询（在另一个屏幕上仍然处于活动状态）也会更新，但由于某种原因，对象Game中缺少整个节点data。

为了处理订阅，我有一个这样的组件。

class Subscriber extends Component<void, …

有一个任务根据角色请求对象的不同字段。假设管理员可以查看一组指标。其他用户可以看到另一组指标。任务是仅请求用户可以查看的指标。React 应用程序正在使用 graphQL 文件加载器，并且应该保持不变。

现在有两个 graphql 文件。在定义的片段上其他 - 使用片段导入进行查询。是否有可能根据情况更换使用过的碎片？

当我使用 gql（来自“graphql-tag”）进行查询/突变/订阅时，出现错误。

有谁遇到过这个错误并且知道如何修复它？
\n这是我的代码：

import React from \'react\';\nimport { Mutation } from \'react-apollo\';\nimport MUTATION from \'./query.js\';\nimport gql from \'graphql-tag\';\n\nconst ADD_POST_MUTATION = gql`\n  mutation addPost($content: String!, $author: String!)\xc2\xa0{\n    addPost(content: $content, author: $author) {\n      content\n      author\n    }\n  }\n`;\n\nexport default class Tool extends React.Component {\n  state = {\n    content: \'\',\n    author: localStorage.getItem(\'user\') || \'\'\n  };\n\n  handleSubmit = (e, mutation) => {\n    console.log(mutation);\n    e.preventDefault();\n    mutation({ variables: { content: this.state.content, author: this.state.author }})\n      .then(res => console.log(res))\n      .catch(e => console.log(e));\n  }\n\n  render() {\n    return …

大约一年前，对apollo-server（或react-apollo？）进行了更新，这完全打破了 GraphQL 请求中省略可空输入的旧用法。

在更新之前，您可以定义如下内容：

Mutation {
  editProfile(id: ID!, name: String, avatar: String)
}

当调用省略输入的客户端时，请说：

editProfile(id: "whateverid", name: "James")

你在你的解析器中得到avatar了undefined。 现在已设置为null.

问题是：null例如，对于某些可选输入来说 是一个完全有效的值avatar。所以基本上，我们在这个过程中丢失了信息，并且不再能够区分服务器端之间的区别：

• 被省略并出现的可选输入null（=不更新数据库），以及
• 显式设置为null（= 更新数据库）的可选输入

我在 Github 上打开了一个关于它的线程：https ://github.com/apollographql/apollo-server/issues/2056

一年前，另一个人在react-apolloGithub 上做了同样的事情： https: //github.com/apollographql/react-apollo/issues/1569

dacz 发布了一个有趣的回复，总结得很好：

当可空输入未出现在 apollo 客户端的查询变量中时，将使用空值进行调用。客户端不应将整个输入作为 null 传递，而应完全省略它或以 undefined 传递它。传递 null 可能意味着显式将输入设为 null。同样适用于输入字段，因此服务器可能会对显式重置值做出反应（在输入中显示为 null，或者如果省略则不处理它）。

这两个线索仍然悬而未决。

有人对此有任何干净的解决方案吗？

我正在开发一个使用 React 前端和 Express 后端的应用程序，并通过 Apollo 设置 GraphQL （我正在关注并修改教程https://www.youtube.com/playlist?list=PLN3n1USn4xlkdRlq3VZ1sT6SGW0-yajjL）

我目前正在尝试部署，并且正在使用 Heroku 进行部署。在部署之前，一切都在我的本地计算机上以及 Google Chrome 中的 Heroku 上完美运行。但是，我在 Safari 和 Firefox 中分别遇到了上述错误。想知道为什么这些浏览器会发生这种情况以及如何修复。

我花了大约10个小时对此进行研究。我尝试过的事情没有什么区别：

• 我尝试将 CORS 添加到我的 Express 后端
• 我尝试将 graphql 端点作为 HTTPS 提供服务
• 在主 app.js 服务器文件中移动 app.use(express.static)

我找不到很多其他的东西可以尝试。我看到的所有地方似乎都说 CORS 解决了问题，但我的问题仍然存在。

Github 链接：https://github.com/LucaProvencal/thedrumroom Live Heroku 应用程序：https://powerful-shore-83650.herokuapp.com/

App.js（快速后端）：

const cors = require('cors')
// const fs = require('fs')
// const https = require('https')
// const http = require('http')

app.use(express.static(path.join(__dirname, 'client/build')));
app.use(cors('*')); //NEXT TRY app.use(cors('/login')) etc...
app.use(cors('/*'));
app.use(cors('/'));
app.use(cors('/register'));
app.use(cors('/login'));

app.get('/login', …

我尝试从公共graphql api使用react-apollo 时收到此错误。

无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本

我已阅读React 文档，我确信问题不是这三个原因之一。

这是一个使用create-react-app. 和react版本react-dom都是16.10.2.

应用程序.js：

import React, {useState} from 'react';
import { Query } from "react-apollo";
import { gql } from "apollo-boost";

const query = gql`
  {
    countries {
      name
      code
    }
  }
`;

function App() {
    const [country, setCountry] = useState('US');
    const onCountryChange = event => {
      setCountry(event.target.value);
    };

    return (
      <div className="App"> …

我有一个输入（附图），需要从 React 应用程序发送到 graphql api。

我使用下面的代码将此对象和枚举与 init 发送到 graphql api Reactjs 代码

const RequestActionEnum = {
NEW: 'New',
UPDATE: 'Update',
ARCHIVE: 'Archive'
}

LocalCodeMutation({
      variables: {
        data: {
          id: null,
          city: values.jurisdiction,
          country: values.country,
          description: values.description,
          edition: values.edition,
          name: values.codeName,
          note: 'test',
          requestType: RequestActionEnum.NEW, // this is where i am sending enum value to api 
          state: values.state
        }
      }
    });

下面的代码是我调用突变的地方

 const [LocalCodeMutation] = useMutation(LOCALCODE_MUTATION, {
refetchQueries: () => [
  { query: GET_LOCALCODES },
],
});

export const LOCALCODE_MUTATION = …

我正在尝试使用 apollo 在 React Native 中实现登录。在反应本机应用程序中

const SIGN_IN = gql`
mutation($username: String!, $password: String!) {
  signin(password: $password, username: $username) {
    user {
      username
    }
    token
  }
}
`;

// 代码已缩写。

function LoginScreen() {
  const [signIn, { loading, error }] = useMutation(SIGN_IN, {
    onCompleted({ data }) {
      if (loading) console.log("Loading.....");
      console.log("Printing data");
      console.log(data.signin.token);
      }
  });
}

后端服务器运行良好。但我在控制台日志中收到错误消息

    [Unhandled promise rejection: TypeError: Cannot read property 'signin' of undefined]

    Stack trace:
    screens/LogInScreen.js:36:6 in useMutation$argument_1.onCompleted
    node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:635:25 in callOncomplete

数据未定义。 所以我尝试了{ data && console.log(data.signin.token) …

我有一个 graphql 端点：QueryDataForOptions

我想根据组件的optionsprop 多次调用它。可能有任意数量的选项。

我想做这样的伪代码，但钩子规则不允许这样做：

const MyComponent = (options) => {
  options.forEach(option => {
    const {data, loading, error} = useQuery(QueryDataForOptions, {variables: {option}})
  })

}

我也考虑过这个伪代码，但我不确定如何处理data被覆盖：

const MyComponent = (options) => {
  const [getOptions, {data, loading, error}] = useLazyQuery(QueryDataForOptions)
  options.forEach(option => {
    getOptions({variables: {option}})
  })
}

我知道正确的解决方案是更改 graphql 端点，但我想在客户端进行此更改。

如何多次调用同一查询？

对于以下代码：

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: endpoint,
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`
    }
  })
});

我需要异步endpoint获取token。我该怎么做？

谢谢