Question

我正在尝试执行graphql查询以获取一些数据。当我对id值进行硬编码时，我将获得道具的输出。

const subcategoryQuery = gql `
  {
    category(id: "Q2F0ZWdvcnk6Nw==") {
      name
      children(first: 10) {
        edges {
          node {
            name
            backgroundImage {
              url
            }
          }
        }
      }
    }
  }`;

但是当我这样写我的GraphQL查询时，我得到了错误。

const subcategoryQuery=gql`
query Subcategories($id:ID!){
    category(id:$id){
        name
        children(first:10){
            edges{
                node{
                    name{
                        backgroundImage{
                            url
                        }
                    }
                }
            }
        }
    }
}
`

我的整个组件文件

import React, { Component } from "react";
import gql from "graphql-tag";
import { graphql } from "react-apollo";




  const subcategoryQuery=gql`
    query Subcategories($id:ID!){
        category(id:$id){
            name
            children(first:10){
                edges{
                    node{
                        name{
                            backgroundImage{
                                url
                            }
                        }
                    }
                }
            }
        }
    }
  `


class Subcategories extends Component {
    state = {};
    // componentDidMount(){
    //     const { categoryId } = this.props.location.state;

    // }
    displayCategories() {
        let sectionStyle = bckg => {
            return {
                margin: "0",
                backgroundImage: "url(" + bckg + ")",
                backgroundSize: "cover"
            };
        };
        var data = this.props.data;
        if (data.loading) return  <div> Loading categories.... </div>;
        else{
            return (
                <div key={data.category.id} className="categories" >
                    { " " } 
                    <p className="heading" > {data.category.name} </p>{" "} {
                    data.category.children.edges.map(elem => ( 
                        <div key = {elem.node.id} className="subcategories"  style = {sectionStyle(elem.node.backgroundImage.url)} > { " " } <p className = "category-name" > {elem.node.name} </p>{" "} <div className = "shop" > SHOP NOW </div>{" "} </div>
                    ))
                } { " " } </div>
                );
        }
    }
    render() {
        console.log(this.props);
        return this.displayCategories();
    }
}

const queryOptions={
    options:props=>{
        return {
          variables:{
            id:props.match.params.id,
        }
      }
    }
}

export default graphql(subcategoryQuery,queryOptions)(Subcategories);

请帮助我解决此错误.......

enter image description here

jsfnshvckjjvnkjsvnkjnkjwfnkjsnfjkafn fvsfnckjnjcnjkxncklfnkjlncklsfnjklsf dzsdsmd与dvjrvdhsbkcxznmehbfdvskcxjhebfvdskcxnj

使用参数执行GraphQL查询时出现错误

0 个答案: