标签: apollo

在我的 React 故事书中，我希望能够使用使用 graphQL 查询和突变（用 Apollo 实现）的组件。

使用 MockedProvider 可以很好地工作，只要我提前指定确切的突变，包括它们的输入。

我想知道是否有可能/如何不提前指定输入，以接受任何输入。

export const MyComponent = () => (
    <Mutation mutation={gql`some mutation`}>
      {(doMutation, { loading, error, data }) => (
        <Button onClick={()=> doMutation({input: {
          someInput: Math.rand()*10 // Would be fine if this was 1.
        }}) />
        {data ? <>Result: {data.someResult}</> : null}
      )
    </Mutation>
)

storiesOf('MyComponent', module)
  .add('some story', () => (
    <StaticRouter context={{}}>
      <MockedProvider
        mocks={[
          {
            request: {
              query: gql`some query...`,
              variables: { input: { someInput: '1' } },
            }, …

我正在关注 youtube 上的 graphql 教程（https://www.youtube.com/watch?v=ed8SzALpx1Q at about 3hr 16min），其中部分内容compose来自“react-apollo”。但是，我收到一个错误，因为新版本的 react-apollo 没有导出这个。

我在网上看了，我需要更换import { compose } from "react-apollo"用import { compose } from "recompose"，但这样做会产生错误TypeError: Cannot read property 'loading' of undefined我也看到了，我应该取代反应，从阿波罗与进口import * as compose from "lodash"，但是当我这样做，我得到其他错误，他说，× TypeError: lodash__WEBPACK_IMPORTED_MODULE_2__(...) is not a function

应用程序.js：

import React from "react";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";

import BookList from "./components/BookList";
import AddBook from "./components/AddBook";

//apollo client setup
const client = …

我使用Apollo Android 库对 GraphQL 端点进行查询。一切正常，直到我尝试将结果转换回 JSON 字符串（将它们存储在Room 数据库中）。我天真地尝试使用Moshi，但是由于以下错误而失败：

无法获得可用的额外产品：接口 com.example.MyQuery$MyFragmentInterface 没有 JsonAdapter

在哪里 MyFragmentInterfaceApollo 生成的用于处理查询片段的接口中。

所以，我试图找到 Apollo 库是否有/生成任何转换方法，即 sth like toJson()/fromJson()，用于生成的模型，但是我找不到任何可用的东西。

我错过了一些明显的东西吗？

我正在努力理解 Express（或 Koa、Hapi 等）与 Apollo GraphQL 服务器集成的附加价值。

我发现它可以在独立模式下很好地工作（例如：https : //medium.com/codingthesmartway-com-blog/apollo-server-2-introduction-efc4026f5654）。

在哪种情况下我们应该使用（或不使用）集成？是什么推动了这个决定？

如果我首先访问主页或刷新主页，我无法在解析器中获取配置文件，因为 cache.readQuery 不起作用。

以及它无限地调用api。

如果我移动到另一个页面并再次回到主页，cache.readQuery 工作并正确获取帖子的个人资料和投票状态。

有没有人遇到过这个问题？home.tsx 是我项目的主页。

此外， useQuery(@apollo/react-hooks) 获取每个页面上的旧数据。

如果您有经验，请帮助我。

• 主页.tsx

    ...
    const GET_POSTS = graphql`
      query posts($accountname: String!, $page: Int, $pathBuilder: any, $postsStatus: String) {
        posts(accountname: $accountname, page: $page, postsStatus: $postsStatus)
          @rest(type: "Post", pathBuilder: $pathBuilder) {
          post_id
          author
          voteStatus(accountname: $accountname) @client
          created_at
        }
      }
    `;
    interface Props {
      author: string;
    }
    const Home: NextPage<Props> = ({ author }) => {
      const { data, fetchMore, loading } = useQuery(GET_POSTS, {
        variables: {
          accountname: author,
          page: 1,
          postsStatus: 'home', …

我正在使用Apollo Stack graphql-server-express和apollo-client.

因为我的后端不完美,所以可能会出现错误,因此我必须对该路径的错误请求做出响应.

直到现在我的主要问题是身份验证,因此我回复了一个错误.

return new Error(`${data.status}: ${data.statusText} @ ${data.url}`)

在前端,我使用apollo-client查询数据.

return apollo
        .query({query: gql`
            query {
                ${query}
            }`,
            forceFetch: forceFetch
        })
        .then(result => { debugger; return result.data })
        .catch(error => { debugger; console.error(error); });

但是,如果查询的一个属性响应错误,则只调用catch函数.即使是剩余属性的数据也会被转移,我在Chrome开发工具的网络标签中看到了这一点.In不是catch函数中的错误对象.

我的尝试与GraphiQL一起使用,我在同一个对象中获取错误和数据.

那么如何在不丢失整个请求的情况下为属性抛出错误呢？

在我通常的经验中，我使用的所有单页应用程序都使用 JWT 作为身份验证机制。我遇到了为此使用 httpOnly cookie 的 api。

由于我们无法通过 javascript 访问此类 cookie 以了解它是否存在，那么如何在 react 应用程序中处理此问题？

我最初的想法是通过sessionStorage在成功登录时设置一些并在收到与身份验证相关的错误时将其删除来跟踪这一点。

但是我相信这不适用于 next.js 服务器端渲染？我们用 apollo 客户端设置了它，它允许设置自定义标头和缓存。

有没有一种通用的方法可以通过上面的设置来处理这个身份验证过程？

在我的组件中，我有以下代码：

componentDidMount () {
  // Setup subscription listener
  const { client, match: { params: { groupId } } } = this.props
  client.subscribe({
    query: HOMEWORK_IN_GROUP_SUBSCRIPTION,
    variables: { groupId },
  }).subscribe({
    next ({ data }) {
      const cacheData = client.cache.readQuery({
        query: GET_GROUP_QUERY,
        variables: { groupId },
      })

      const homeworkAlreadyExists = cacheData.group.homeworks.find(
        homework => homework._id == data.homeworkInGroup._id
      )
      if (!homeworkAlreadyExists) {
        client.cache.writeQuery({
          query: GET_GROUP_QUERY,
          variables: { groupId },
          data: { ...cacheData,
            group: { ...cacheData.group,
              homeworks: [ ...cacheData.group.homeworks,
                data.homeworkInGroup,
              ],
            },
          },
        })
      } …

一直在尝试使用parcel为我的反应应用程序设置apollo-client.事情很好,但在控制台中,有很多关于我的CI管道中node_modules/apollo-client中缺少源文件的警告.

尝试清除纱线缓存,删除node_modules并重新安装.但这些警告是持久的.我可能会遗漏包裹或巴贝尔配置的东西.找到了一些提示,但它们是特定于webpack的.

以下是日志:

??  Could not load source file "../../src/data/store.ts" in source map of "../node_modules/apollo-client/data/store.js".
??  Could not load source file "../../src/util/Observable.ts" in source map of "../node_modules/apollo-client/util/Observable.js"
.
??  Could not load source file "../../src/core/QueryManager.ts" in source map of "../node_modules/apollo-client/core/QueryManager.js".
??  Could not load source file "../../src/data/mutations.ts" in source map of "../node_modules/apollo-client/data/mutations.js".
??  Could not load source file "../../src/scheduler/scheduler.ts" in source map of "../node_modules/apollo-client/scheduler/scheduler.js".
??  Could not load source file "../../src/data/queries.ts" in source map of "../node_modules/apollo-client/data/queries.js".
??  Could not load …

可以使用 终止实际的 HTTP 服务器实例server.close(callback)，但我不确定任何挂起的 WebSocket 操作（通过 WebSocket 运行的突变或查询）会发生什么。由于 http.Server 对 WebSocket 操作一无所知，它可能会忽略它们。如何正确确保当收到 SIGTERM 时，服务器停止接受新请求/webSocket 连接，完成挂起的连接然后关闭？

用谷歌找不到任何关于此的信息。