标签: react-apollo

我这里有这个代码

import React from "react";\n\nimport { useQuery } from "@apollo/react-hooks";\nimport gql from "graphql-tag";\n\nconst FETCH_POSTS_QUERY = gql`\n  {\n    getMovies {\n      id\n      title\n    }\n  }\n`;\n\nfunction Home() {\n  const { loading, data } = useQuery(FETCH_POSTS_QUERY);\n\n  if (data) {\n    console.log(data);\n  }\n\n  return (\n    <div>\n      <h1>Home</h1>\n    </div>\n  );\n}\n\nexport default Home;\n\n

当我运行它时，我的控制台中出现很多错误。我不确定我\xe2\x80\x99m 做错了什么。

我可以看出这是由我认为 useQuery 的使用方式引起的。但我不确定出了什么问题。

谢谢！

我正在尝试从缓存中读取数据，使用cache.readFragment并订阅更改，就像这样useQuery做一样。我尝试使用useQuerywithfetchPolicy: 'cache-only'但尽管我在缓存中看到我的实体，但数据返回为空。这cache.readFragment正常，但它不订阅，这意味着应用于缓存的任何更改都不会重新触发它。

我怎样才能实现这种行为，并让它在某些内容突变到缓存后立即工作？

  // one time read
  const data = client.cache.readFragment({
    id: client.cache.identify({
      __typename: 'Creator',
      id: creatorId,
    }),
    fragment: IS_FOLLOWING_FRAGMENT,
  }) as MyCreatorIsFollowing;

  // comes back as null although I see it in the cache
  const { data } = useQuery(GET_IS_FOLLOW_CREATOR, {
    fetchPolicy: 'cache-only',
    variables: { id: creatorId },
  });

我一直在几个查询中使用 @skip 和 @include 指令，虽然它们对于“简单”可定制查询非常有效，但我正在寻找支持高度可定制查询的解决方案。我说的是大约 20 个字段，每个字段都由它自己的单独标志跳过/包含。虽然理论上可以向查询传递 20 个布尔参数并使用@include(if: $the_flag)20 次，但我正在寻找更好的方法来做到这一点。就像传递一个配置对象并包含一些基于其字段的查询部分，或者可能根据每个标志合并来自缝合的查询。

我已经阅读过有关@graphql-tools/stitch的内容，但我不确定我的解决方案是否会通过约 20 针的方式使这种方法受益。是否有任何工具或任何简单的方法可以根据多个条件动态创建高度可定制的查询？

有没有办法将React-Apollo与React-Storybooks一起使用？之前我正在尝试使用Relay,并且有一个模块(https://github.com/orta/react-storybooks-relay-container)允许创建不需要网络访问但使用静态数据的存根容器.

是否有React-Apollo框架的等价物？http://dev.apollodata.com/react/

FWIW我正在使用React-Native但是一切背后的想法和设置应该非常相似(例如我使用https://github.com/storybooks/react-native-storybook而不是基于Web的解决方案)

我正在尝试使用封装Chat两个查询和一个突变的组件compose。

但是，控制台中仍然出现以下错误：

未捕获的错误： react-apollo每个HOC仅支持查询，订阅或突变。[object Object]有2个查询，0个订阅和0个突变。您可以使用' compose'将多种操作类型连接到一个组件

这是我的查询和导出语句：

// this query seems to cause the issue
const findConversations = gql`
    query allConversations($customerId: ID!) {
        allConversations(filter: {
          customerId: $customerId
        })
    } {
        id
    }
`

const createMessage = gql`
    mutation createMessage($text: String!, $conversationId: ID!) {
        createMessage(text: $text, conversationId: $conversationId) {
            id
            text
        }
    }
`

const allMessages = gql`
    query allMessages($conversationId: ID!) {
        allMessages(filter: {
        conversation: {
        id: $conversationId
        }
        })
        {
            text
            createdAt …

Apollo GraphQL的Mocking示例具有以下代码(见下文).

有趣的是最后一行 - 他们创建并执行graphql查询.但是你通常需要创建ApolloClient对象.我无法弄清楚如何做到这一点.

ApolloClient期望NetworkingInterface作为参数而不是可执行模式.

那么,有没有办法从可执行模式创建ApolloClient,没有NetworkingInterface？

import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import { graphql } from 'graphql';

// Fill this in with the schema string
const schemaString = `...`;

// Make a GraphQL schema with no resolvers
const schema = makeExecutableSchema({ typeDefs: schemaString });

// Add mocks, modifies schema in place
addMockFunctionsToSchema({ schema });

const query = `
query tasksForUser {
  user(id: 6) { id, name }
}
`;

graphql(schema, query).then((result) => console.log('Got result', result));

使用 React-Apollo，是否可以再次重新获取，直到获取的数据具有特定值？

假设我有一个组件会一直 ping 服务器，直到服务器返回某个响应。

graphql(gql`
  query {
    ping {
      response
    }
  }
`)(MyComponent)

服务器要么返回

ping: {
  response: "busy"
}

或者

ping: {
  response: "OK"
}

我希望这个组件每隔一秒就 ping 服务器（轮询），直到响应“正常”。使用 Apollo 最简单的方法是什么？

我真的很喜欢让组件请求他们自己的数据的 graphQL 模式，但是一些数据属性的计算成本很高，所以我想本地化逻辑（和代码）来这样做。

function CheaterList({ data: { PlayerList: players } }) {
  return (
    <ul>
      {players && players.map(({ name, isCheater }) => (
        <li key={name}>{name} seems to be a {isCheater ? 'cheater' : 'normal player'}</li>
      ))}
    </ul>
  );
}

export default graphql(gql`
  query GetList {
    PlayerList {
      name,
      isCheater
    }
  }
`)(CheaterList);

架构看起来像：

type Queries {
    PlayerList: [Player]
}

type Player {
    name: String,
    kills: Integer,
    deaths: Integer
}

所以我想将该isCheater属性添加到 Player 并使其代码为：

function computeIsCheater(player: Player){
    // This is …

Apollo客户端是否有类似mapStateToProps（Redux）之类的东西？

假设我有一个组件，查询后我知道缓存中有数据，因此我执行以下操作：

    class Container extends React.Component {
      ...
      ...
      render() {
        const notes = this.props.client.readFragment(NOTES_FRAGMENT)
        // notes has everything I need
        return (<Child notes={notes} />);
      }

    }
    export default WithApollo(Container);

但是，当我有一个名为mutation并进行更新的同级组件时，该<Child />组件的道具永远不会得到更新。

class AnotherContainer extends React.Component {
   render() {
     return(
       <Mutation
          mutation={UPDATE_NOTE}
          update={(cache, {data: {updateNote}}) =? {
            const list = cache.readFragment({
              fragment: NOTES_FRAGMENT
            })
            // manipulate list
            cache.writeFragment({fragment:NOTES_FRAGMENT, data })
          }
        }
     )
   }
}

所以我的问题是，<Child />每当我执行writeFragment时如何更新组件的道具？是否有诸如mapStateToProps之类的东西可以将notes道具“连接” 到缓存，所以无论何时更新，都会触发React生命周期？

我有一堆信息存储在我的状态中,我需要使用突变传递给我的graphQL服务器,但是我需要在调用下一个突变之前使用每个突变的结果,因为我需要:

• 在我的数据库中创建一个新对象
• 使用为该对象生成的id来创建另一个对象
• 修改原始对象以存储第二个对象生成的id

我注意到apollo Mutation组件有一个onCompleted回调,但我不知道如何使用这个回调来触发另一个突变或者是否正确解决我的问题.我还研究了将我的突变配对以立即发送它们,但似乎也不是解决方案.任何帮助,将不胜感激