Apollo query and mutation

Apollo query and mutation

query

Query组件是Apollo应用程序中最重要的构建块之一。要创建一个Query组件,只需传递一个包含该gql函数的GraphQL查询字符串,this.props.query并提供一个函数来this.props.children告诉React要呈现的内容。该Query组件是使用渲染道具模式的React组件的示例。React将调用你提供给你的渲染道具函数,这个函数来自于一个阿波罗客户端的对象,包含了可以用来渲染UI的 loading, error, 和data属性。

  <Query query={QUERY}>
    {({ loading, error, data }) => {
      if (loading) return "Loading...";
      if (error) return `Error! ${error.message}`;
      return (
        <View name="dog" onChange={onDogSelected}>
          {data.dogs.map(dog => (
            <Text key={dog.id} value={dog.breed}>
              {dog.breed}
            </Text>
          ))}
        </View >
      );
    }}
  </Query>

在render prop函数中处理查询结果的预览。当我们从Query组件中获取数据时,我们的组件通过阿波罗客户端缓存订阅了查询结果。首先尝试从Apollo缓存中加载查询结果。如没有的话,将请求发送到服务器。一旦数据返回并将其存储在Apollo缓存中。由于查询组件订阅了结果,所以它会重新更新数据。

mutation

Mutation组件是用来从UI触发突变的东西。要创建一个Mutation component,只需将一个用gql函数包装的GraphQL突变字符串传递给这个组件的prop mutation。该Mutation组件还需要一个render prop function。第一个参数是mutate function,这是想要触发突变的方式。mutate function可以选择接受variables,optimisticResponse,refetchQueries,和update。也可以将这些值作为props传递给Mutation组件。第二个参数是一个带有你的突变结果的对象。包括data,error,以及loading属性。

 <Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => (
        <p>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </p>
      )}
    </Mutation>

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容