react-apollo#Query JavaScript Examples

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

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

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

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

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

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

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

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

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

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

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