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 |
|
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 |
|
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 |
|
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>
);
}
