react-apollo#Query JavaScript Examples
The following examples show how to use
react-apollo#Query.
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: App.js From tunnel-tool with MIT License | 6 votes |
|
App = () => {
return (
<Query query={Viewer.Get}>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
const { viewer } = data;
return (
<Layout
brand={
<span>
<i className="fa fa-compress" /> Tunnels
</span>
}
viewer={viewer}
left={[<HomeLink key={"home"} viewer={viewer} />]}
right={[]}
>
<Root viewer={viewer} />
</Layout>
);
}}
</Query>
);
}
Example #2
| Source File: UserProfile.js From pathways with GNU General Public License v3.0 | 6 votes |
|
render() {
const Something = () => {
return(
<Query query={FETCH_PROFILE_DATA}>
{({loading, error, data}) => {
if(loading) return(<div>Loading...</div>);
else if(error) {
console.log(error)
return(<div>Error occured</div>)
}
else {
console.log(data);
return(<div>Hello</div>)
}
}}
</Query>
)
}
return(
<div className='ProfileSection'>
<div className='ProfileLeftSection'>
<ProfileBio content={this.props.content}/>
</div>
<div className='ProfileRightSection'>
<ProfileMain content={this.props.content.pathwayData}/>
</div>
<Something />
</div>
);
}
Example #3
| Source File: AuthorSelect.js From graphql-sample-apps with Apache License 2.0 | 5 votes |
|
export default function AuthorSelect({ onChange, author }) {
let authorName = "Select Author"
if (author !== "") {
authorName = author
}
const [value, setValue] = useState(authorName);
return (
<Query query={GET_AUTHORS}>
{({ loading, error, data }) => {
if (loading) {
return <div>Fetching Authors...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
const authorList = [
{ id: "default", name: "Select an Author" },
...data.queryAuthor
];
const onSelectboxChange = e => {
setValue(e.target.value);
const selectedIndex = e.target.options.selectedIndex;
const authorId = authorList[selectedIndex].id;
const authorName = e.target.value;
onChange(authorName, authorId);
};
return (
<select
id="authorSelect"
value={value}
onChange={onSelectboxChange}
className="form-control"
>
{authorList.map(({ name, id }) => (
<option value={name} key={id}>
{name}
</option>
))}
</select>
);
}}
</Query>
);
}
Example #4
| Source File: App.js From Gameplayer with MIT License | 5 votes |
|
render() {
const { withImage, withName, orderBy, showHelpDialog } = this.state
return (
<ApolloProvider client={client}>
<div className="App">
<Grid container direction="column">
<Header onHelp={this.toggleHelpDialog} />
<Filter
orderBy={orderBy}
withImage={withImage}
withName={withName}
onOrderBy={field => this.setState(state => ({ ...state, orderBy: field }))}
onToggleWithImage={() =>
this.setState(state => ({ ...state, withImage: !state.withImage }))
}
onToggleWithName={() =>
this.setState(state => ({ ...state, withName: !state.withName }))
}
/>
<Grid item>
<Grid container>
<Query
query={GRAVATARS_QUERY}
variables={{
where: {
...(withImage ? { imageUrl_starts_with: 'http' } : {}),
...(withName ? { displayName_not: '' } : {}),
},
orderBy: orderBy,
}}
>
{({ data, error, loading }) => {
return loading ? (
<LinearProgress variant="query" style={{ width: '100%' }} />
) : error ? (
<Error error={error} />
) : (
<Gravatars gravatars={data.gravatars} />
)
}}
</Query>
</Grid>
</Grid>
</Grid>
<Dialog
fullScreen={false}
open={showHelpDialog}
onClose={this.toggleHelpDialog}
aria-labelledby="help-dialog"
>
<DialogTitle id="help-dialog">{'Show Quick Guide?'}</DialogTitle>
<DialogContent>
<DialogContentText>
We have prepared a quick guide for you to get started with The Graph at
this hackathon. Shall we take you there now?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.toggleHelpDialog} color="primary">
Nah, I'm good
</Button>
<Button onClick={this.gotoQuickStartGuide} color="primary" autoFocus>
Yes, pease
</Button>
</DialogActions>
</Dialog>
</div>
</ApolloProvider>
)
}
Example #5
| Source File: AccelerationsChart.js From openeew-dashboard with Apache License 2.0 | 5 votes |
|
AccelerationsChart = () => {
return (
<Query query={ACC_STREAM} pollInterval={POLL_INTERVAL}>
{({ loading, error, data, startPolling, stopPolling }) => {
if (loading) return <div>Fetching</div>
if (error || !data) return <div>Error</div>
let dataToRender = data.accStream
return (
<svg
viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
style={{ backgroundColor: '#393939' }}
>
{/* x-axis */}
<path
strokeDasharray="0.5, 0.25"
d="M 0 15 H 100"
strokeWidth="0.015"
stroke="white"
/>
<path
stroke="#33b1ff"
fill="none"
strokeLinecap="round"
strokeWidth="0.15"
d={renderPath(dataToRender, 'x')}
/>
<path
stroke="#08bdba"
fill="none"
strokeLinecap="round"
strokeWidth="0.15"
d={renderPath(dataToRender, 'y')}
/>
<path
stroke="#d4bbff"
fill="none"
strokeLinecap="round"
strokeWidth="0.15"
d={renderPath(dataToRender, 'z')}
/>
</svg>
)
}}
</Query>
)
}
Example #6
| Source File: StoreDetail.js From youdidao-unmanned-shop with MIT License | 5 votes |
|
render(){
// 截取路由
const urlParams = new URL(window.location.href);
const { hash } = urlParams;
const itemId = hash.split('StoreDetail/')[1];
return(
<Query
query={gql`
query(
$id: ID!
){
store(id: $id){
id
imageUrl
name
address
longitude
latitude
distance
sales
balance
status
}
}
`}
variables={{ id: itemId }}
>
{({ loading, data:{store}, refetch }) => {
if (loading) return <Spin />
console.log('store',store);
refetch();
return (
<PageHeaderWrapper title="订单详情页" loading={loading}>
<Card bordered={false}>
<DescriptionList size="large" title="订单基础信息" style={{ marginBottom: 32 }}>
<Description style={{ width:"50%" }} term="店铺ID">{store.id}</Description>
<Description style={{ width:"50%" }} term="店铺名称">{store.name}</Description>
<Description style={{ width:"50%" }} term="店铺图片">{<img alt='' src={store.imageUrl} width='50' />}</Description>
<Description style={{ width:"50%" }} term="店铺地址">{store.address}</Description>
<Description style={{ width:"50%" }} term="店铺经度">{store.longitude}</Description>
<Description style={{ width:"50%" }} term="店铺纬度">{store.latitude}</Description>
<Description style={{ width:"50%" }} term="店铺总销售额">{store.sales/100}</Description>
<Description style={{ width:"50%" }} term="店铺余额">{store.balance/100}</Description>
</DescriptionList>
</Card>
</PageHeaderWrapper>
);
}}
</Query>
)
}
Example #7
| Source File: GetPathway.js From pathways with GNU General Public License v3.0 | 5 votes |
|
GetPathway = (props) => {
console.log(props)
const value = queryString.parse(props.location.search).id
const GET_PATHWAY = gql`
query {
Pathway(id: "${value}") {
id
name
steps {
id
name
time
index
isPathway
content{
id
title
content
}
pathway {
id
}
}
}
}
`
return (
<Query query={GET_PATHWAY}>
{({ loading, error, data }) => {
if (loading) return <div>Loading</div>
if (error) return `Error! ${error.message}`
const obj = {
name: data.Pathway[0].name,
id: data.Pathway[0].id,
}
props.addNewPathway(obj)
return <Pathway pathway={data.Pathway[0]} />
}}
</Query>
)
}
Example #8
| Source File: ResourceList.js From shopify-node-react-app with MIT License | 5 votes |
|
render() {
const app = this.context;
const redirectToProduct = () => {
const redirect = Redirect.create(app);
redirect.dispatch(
Redirect.Action.APP,
'/edit-products',
);
};
const twoWeeksFromNow = new Date(Date.now() + 12096e5).toDateString();
return (
<Query query={GET_PRODUCTS_BY_ID} variables={{ ids: store.get('ids') }}>
{({ data, loading, error }) => {
if (loading) return <div>Loading…</div>;
if (error) return <div>{error.message}</div>;
console.log(data);
return (
<Card>
<ResourceList
showHeader
resourceName={{ singular: 'Product', plural: 'Products' }}
items={data.nodes}
renderItem={item => {
const media = (
<Thumbnail
source={
item.images.edges[0]
? item.images.edges[0].node.originalSrc
: ''
}
alt={
item.images.edges[0]
? item.images.edges[0].node.altText
: ''
}
/>
);
const price = item.variants.edges[0].node.price;
return (
<ResourceList.Item
id={item.id}
media={media}
accessibilityLabel={`View details for ${item.title}`}
onClick={() => {
store.set('item', item);
redirectToProduct();
}}
>
<Stack>
<Stack.Item fill>
<h3>
<TextStyle variation="strong">
{item.title}
</TextStyle>
</h3>
</Stack.Item>
<Stack.Item>
<p>${price}</p>
</Stack.Item>
<Stack.Item>
<p>Expires on {twoWeeksFromNow} </p>
</Stack.Item>
</Stack>
</ResourceList.Item>
);
}}
/>
</Card>
);
}}
</Query>
);
}
Example #9
| Source File: index.js From youdidao-unmanned-shop with MIT License | 5 votes |
|
render() {
const { previewVisible } = this.state;
return (
<div className="clearfix">
<Query
query={gql`
{
params: uploadParams {
key
OSSAccessKeyId: accessid
host
policy
signature
expire
}
}
`}
>
{({ loading, data, refetch }) => {
console.log();
if (loading) return <Spin />;
const { key, host, OSSAccessKeyId, policy, signature } = data.params;
return (
<Upload
action={host}
beforeUpload={() => refetch()}
data={{
key,
policy,
OSSAccessKeyId,
signature,
}}
onPreview={this.handlePreview}
onChange={this.handleChange.bind(this, key)} // eslint-disable-line
>
<Button>
<Icon type="upload" />
</Button>
</Upload>
);
}}
</Query>
<Modal visible={previewVisible} />
</div>
);
}
Example #10
| Source File: HomeScreen.js From 4noobs-mobile with MIT License | 4 votes |
|
render() {
return (
<RootView>
<Menu />
<AnimatedContainer
style={{
transform: [{ scale: this.state.scale }],
opacity: this.state.opacity,
}}
>
<SafeAreaView>
<ScrollView style={{ height: "100%" }}>
<TitleBar>
<TouchableOpacity
onPress={this.props.openMenu}
style={{ position: "absolute", top: 0, left: 0 }}
>
<Avatar />
</TouchableOpacity>
<Title>welcome back,</Title>
<Name>{this.props.name}</Name>
<NotificationIcon
style={{
marginRight: 20,
position: "absolute",
right: 20,
top: 5,
}}
/>
</TitleBar>
<ScrollView
style={{
flexDirection: "row",
padding: 20,
paddingLeft: 12,
paddingTop: 30,
}}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<CardsContainer>
{logos.map((logo, index) => (
<Logo key={index} image={logo.image} text={logo.text} />
))}
</CardsContainer>
</ScrollView>
<Subtitle>Continue Learning</Subtitle>
<ScrollView
horizontal={true}
style={{ paddingBottom: 30 }}
showsHorizontalScrollIndicator={false}
>
<Query query={CardsQuery}>
{({ loading, error, data }) => {
if (loading) return <Message>Loading...</Message>;
if (error) return <Message>Error...</Message>;
return (
<CardsContainer>
{data.cardsCollection.items.map((card, index) => (
<TouchableOpacity
key={index}
onPress={() => {
this.props.navigation.push("Section", {
section: card,
});
}}
>
<Card
title={card.title}
image={card.image}
caption={card.caption}
logo={card.logo}
subtitle={card.subtitle}
content={card.content}
/>
</TouchableOpacity>
))}
</CardsContainer>
);
}}
</Query>
</ScrollView>
<Subtitle>Popular Courses</Subtitle>
{courses.map((course, index) => (
<Course
key={index}
image={course.image}
title={course.title}
subtitle={course.subtitle}
logo={course.logo}
author={course.author}
avatar={course.avatar}
caption={course.caption}
/>
))}
</ScrollView>
</SafeAreaView>
</AnimatedContainer>
</RootView>
);
}
Example #11
| Source File: Financial.js From youdidao-unmanned-shop with MIT License | 4 votes |
|
render() {
const { cur, pages } = this.state;
const topColResponsiveProps = {
xs: 6,
sm: 6,
md: 6,
lg: 6,
xl: 6,
style: { marginBottom: 24 },
};
const ListContent = ({ data: { price, discount, amount, store, coupon } }) => (
<div className={styles.listContent}>
<div className={styles.listContentItem}>
<p>店铺名称</p>
<p>{store.name}</p>
</div>
<div className={styles.listContentItem}>
<p>价格</p>
<p>{price/100}</p>
</div>
<div className={styles.listContentItem}>
<p>优惠金额</p>
<p>{discount / 100}</p>
</div>
{
coupon?
<div className={styles.listContentItem}>
<p>优惠券金额</p>
<p>{coupon.amount}</p>
</div>
:
null
}
<div className={styles.listContentItem}>
<p>总计</p>
<p>{amount / 100}</p>
</div>
</div>
);
const Changepage = (page, pageSize) => {
this.setState({
cur: page,
pages: pageSize,
})
}
return (
<Query
query={gql`
query(
$pageSize: Int,
$currentPage: Int,
$status: OrderStatus,
){
orders(
input:{
pageSize: $pageSize,
currentPage: $currentPage,
status: $status,
}
) {
list{
id
price
discount
amount
code
orderItem{
id
imageUrl
title
price
amount
number
}
trade{
id
price
status
}
user{
id
imageUrl
nickname
balance
point
role
phone
}
store{
id
imageUrl
name
address
longitude
latitude
distance
sales
balance
status
}
coupon{
id
amount
require
usedAt
expiredDate
}
}
pagination{
pageSize
total
current
}
}
allFinancial{
totalSales
monthSales
weekSales
daySales
}
}
`}
variables={{ pageSize: pages, currentPage: cur, status:'completed' }}
>
{({ loading, data:{ orders, allFinancial }, refetch }) => {
if (loading) return <Spin />;
refetch();
const { pagination } = orders;
const {
totalSales,
monthSales,
weekSales,
daySales,
} = allFinancial;
return (
<div className={styles.standardList}>
<h3 style={{ marginTop: 10, marginBottom: 10 }}>财务统计:</h3>
<Row gutter={24}>
<Col {...topColResponsiveProps}>
<ChartCard
bordered={false}
title={<FormattedMessage id="app.analysis.total-sales" defaultMessage="Total Sales" />}
loading={loading}
total={totalSales/100}
footer={<Field />}
contentHeight={46}
/>
</Col>
<Col {...topColResponsiveProps}>
<ChartCard
bordered={false}
title={<FormattedMessage id="app.analysis.monthly-sales" defaultMessage="月销售额" />}
loading={loading}
total={monthSales/100}
footer={<Field />}
contentHeight={46}
/>
</Col>
<Col {...topColResponsiveProps}>
<ChartCard
bordered={false}
title={<FormattedMessage id="app.analysis.weekly-sales" defaultMessage="周销售额" />}
loading={loading}
total={weekSales/100}
footer={<Field />}
contentHeight={46}
/>
</Col>
<Col {...topColResponsiveProps}>
<ChartCard
bordered={false}
title={<FormattedMessage id="app.analysis.daily-sales" defaultMessage="日销售额" />}
loading={loading}
total={daySales/100}
footer={<Field />}
contentHeight={46}
/>
</Col>
</Row>
<h3 style={{ marginTop: 10, marginBottom: 10 }}>已完成订单:</h3>
<Card>
<List
size="large"
rowKey="id"
loading={loading}
dataSource={orders && orders.list ? orders.list : []}
renderItem={item => (
<List.Item>
<List.Item.Meta
title={`[${item.id}]`}
description={item.content}
/>
<ListContent data={item} />
</List.Item>
)}
/>
<Pagination
current={pagination.current}
total={pagination.total}
style={{ float:"right" }}
onChange={Changepage}
/>
</Card>
</div>
);
}}
</Query>
);
}
