react-apollo#Mutation JavaScript Examples

The following examples show how to use react-apollo#Mutation. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: GraftStore.js    From youdidao-unmanned-shop with MIT License 5 votes vote down vote up
UpdateCategory = Form.create()(props => {
  const { UpdatemodalVisible, form, UpdatahandleModalVisible, data } = props;
  
  const updateId = data ? data.id : null;

  return (
    <Mutation
      mutation={gql`
        mutation(
          $id: ID!
          $status: StoreStatus!
        ) {
          updateStoreStatus(
            input: {
              # 名称
              id: $id
              # 简介
              status: $status
            }
          ) 
        }
      `}
      variables={{ id: updateId, status:'published' }}
    >
      {mutate => {
        const handleSubmit = () => {
          const adddata = {};
          adddata.id = updateId;
          adddata.status = 'published';
          try {
            const promise = new Promise(resolve => {
              console.log('adddata', adddata);
              resolve(mutate({ variables: adddata }));
            });
            promise.then(value => {
              console.log(value);
              message.success('上架成功');
              UpdatahandleModalVisible();
            });
          } catch (catchedError) {
            //
          }
        };
        return (
          <Modal
            destroyOnClose
            title="上架"
            visible={UpdatemodalVisible}
            onOk={() => {
              form.validateFields((err, fieldsValue) => {
                if (err) return;
                handleSubmit(fieldsValue);
              });
            }}
            onCancel={() => UpdatahandleModalVisible()}
          >
            <p>请确定是否上架!!!</p>
          </Modal>
        );
      }}
    </Mutation>
  );
})
Example #2
Source File: editProducts.js    From shopify-node-react-app with MIT License 4 votes vote down vote up
render() {
    const { name, price, discount, variantId } = this.state;
    return (
      <Mutation
        mutation={UPDATE_PRICE}
      >
        {(handleSubmit, {error, data}) => {
          const showError = error && (
            <Banner status="critical">{error.message}</Banner>
          );
          const showToast = data && data.productVariantUpdate && (
            <Toast
              content="Sucessfully updated"
              onDismiss={() => this.setState({ showToast: false })}
            />
          );
          return (
            <Frame>
              <Page>
                <Layout>
                  {showToast}
                  <Layout.Section>
                    {showError}
                  </Layout.Section>
                  <Layout.Section>
                    <DisplayText size="large">{name}</DisplayText>
                    <Form>
                      <Card sectioned>
                        <FormLayout>
                          <FormLayout.Group>
                            <TextField
                              prefix="$"
                              value={price}
                              disabled={true}
                              label="Original price"
                              type="price"
                            />
                            <TextField
                              prefix="$"
                              value={discount}
                              onChange={this.handleChange('discount')}
                              label="Discounted price"
                              type="discount"
                            />
                          </FormLayout.Group>
                          <p>
                            This sale price will expire in two weeks
                          </p>
                        </FormLayout>
                      </Card>
                      <PageActions
                        primaryAction={[
                          {
                            content: 'Save',
                            onAction: () => {
                              const productVariableInput = {
                                id: variantId,
                                price: discount,
                              };
                              handleSubmit({
                                variables: { input: productVariableInput },
                              });
                            }
                          }
                        ]}
                        secondaryActions={[
                          {
                            content: 'Remove discount'
                          }
                        ]}
                      />
                    </Form>
                  </Layout.Section>
                </Layout>
              </Page>
            </Frame>
          );
        }}
      </Mutation>
    );
  }
Example #3
Source File: GoodsList.js    From youdidao-unmanned-shop with MIT License 4 votes vote down vote up
render() {
    const { cur, pages, searchhName } = this.state;

    const ListContent = ({ data: { pointDiscountPrice, name, originalPrice, price, type, status } }) => (
      <div className={styles.listContent}>
        <div className={styles.listContentItem}>
          <p>名称</p>
          <p>{name}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>原价</p>
          <p>{Number(originalPrice) / 100}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>价格</p>
          <p>{Number(price) / 100}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>最大抵扣金额</p>
          <p>{Number(pointDiscountPrice) / 100}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>类型</p>
          <p>{type === 'special' ? '不可退款' : '可退款'}</p>
        </div>
        <div className={styles.listContentItem}>
          <p>状态</p>
          <p>{status === 'published' ? '已上架' : '未上架'}</p>
        </div>
      </div>
    );

    const Changepage = (page, pageSize) => {
      this.setState({
        cur: page,
        pages: pageSize,
      })
    }

    const jump = itemId => {
      router.push(`/Goods/GoodsList/GoodDetail/${itemId}`);
    }

    const extraContent = (
      <div>
        <Search
          placeholder="请输入"
          onSearch={value => this.handleSearch(value)}
        />
      </div>
    ); 

    return (
      <PageHeaderWrapper>
        <Card bordered={false} title="商品列表" extra={extraContent}>
          <Query
            query={gql`
              query(
                $pageSize: Int,
                $currentPage: Int,
                $status: Status,
                $nameLike: String,
              ){
                items(
                  pageSize: $pageSize,
                  currentPage: $currentPage,
                  status: $status,
                  nameLike: $nameLike,
                ) {
                  list {
                    code
                    name
                    content
                    originalPrice
                    pointDiscountPrice
                    price
                    unit
                    imageUrl
                    stock
                    type
                    status
                  }
                  pagination{
                    pageSize
                    total
                    current
                  }
                }
              }
            `}
            variables={{ pageSize: pages, currentPage: cur, status: 'published', nameLike: searchhName }}
          >
            {({ loading, data, refetch }) => {
              if (loading) return <Spin />;
              refetch();
              const { items } = data;
              console.log('items',items);
              const { pagination } = items;
              return (
                <Mutation
                  mutation={gql`
                    mutation(
                      $code: ID!
                      $status: ItemStatus
                    ) {
                      updateItemStatus(
                        input: {
                          # 名称
                          code: $code
                          # 简介
                          status: $status
                        }
                      ) 
                    }
                  `}
                >
                  {mutate => {
                    const updateStatus = dataId => {
                      const itemData = {};
                      itemData.code = dataId;
                        itemData.status = 'draft';
                        try {
                          const promise = new Promise(resolve => {
                            console.log('itemData', itemData);
                            resolve(mutate({ variables: itemData }));
                          });
                          promise.then(value => {
                            console.log(value);
                            message.success('下架成功');
                            refetch();
                          });
                        } catch (catchedError) {
                          //
                        }
                    };

                    return (
                      <div className={styles.standardList}>
                        <List
                          size="large"
                          rowKey="code"
                          loading={loading}
                          dataSource={items && items.list ? items.list : []}
                          renderItem={item => (
                            <List.Item
                              actions={[
                                <a
                                  onClick={() => {
                                    Modal.confirm({
                                      title: '下架商品',
                                      content: '确定下架该类型吗?',
                                      okText: '确认',
                                      cancelText: '取消',
                                      onOk: () => updateStatus(item.code),
                                    });
                                  }}
                                >
                                  下架
                                </a>,
                              ]}
                            >
                              <List.Item.Meta
                                avatar={
                                  <Avatar src={item.imageUrl} shape="square" size="large" />
                                }
                                title={<a onClick={()=>jump(item.code)}>{item.name}</a>}
                                description={item.content}
                              />
                              <ListContent data={item} />
                            </List.Item>
                          )}
                        />
                        <Pagination
                          current={pagination.current}
                          total={pagination.total}
                          style={{ float:"right" }}
                          onChange={Changepage}
                        />
                      </div>
                    );
                  }}
                </Mutation>
              );
            }}
          </Query>
        </Card>
      </PageHeaderWrapper>
    );
  }