如何使用Axios从React组件调用具有.Net核心的Grpahql?

时间:2018-08-15 14:52:04

标签: reactjs graphql asp.net-core-2.0 asp.net-core-webapi graphql-dotnet

我是graphql的新手,并尝试使用graphql-dotnet库以点网核心实现Graphql。

我们在此应用程序中没有专用的数据库。应用程序的高级流程是

Front End(React) 
    (Calls) > GraphQlController (.Net core)
     (Calls) > Sales force api 
      Send data back to front end.

Graphql设置。

public class GraphQLController : ControllerBase
    {
        private readonly IOptions<ApplicationConfiguration> _configuration;
        public GraphQLController(IOptions<ApplicationConfiguration> config)
        {
            this._configuration = config;
        }
        public async Task<IActionResult> Post([FromBody] GraphQLQuery query)
        {
            var inputs = query.Variables.ToInputs();

            var schema = new Schema()
            {
                Query = new OrderQuery(_configuration)
            };

            var result = await new DocumentExecuter().ExecuteAsync(_ =>
            {
                _.Schema = schema;
                _.Query = query.Query;
                _.OperationName = query.OperationName;
                _.Inputs = inputs;
            }).ConfigureAwait(false);

            if (result.Errors?.Count > 0)
            {
                return BadRequest();
            }

            return Ok(result);
        }
    }

Query class
 public class GraphQLQuery
    {
        public string OperationName { get; set; }
        public string NamedQuery { get; set; }
        public string Query { get; set; }
        public JObject Variables { get; set; }
    }

用于反序列化的模型类

public class OrderModel
    {
        public string Id { get; set; }
        public string Name { get; set; }
    }

Graphql中的等效类型

public class OrderType : ObjectGraphType<OrderModel>
    {
        public OrderType()
        {
            Name = "Order";

            Field(x => x.Id).Description("The ID of the order.");
            Field(x => x.Name).Description("The name of the order");

        }
    }

用于调用销售人员服务的Query类

public class OrderQuery : ObjectGraphType
    {

        public OrderQuery(IOptions<ApplicationConfiguration> config)
        {
            Field<OrderType>(
                "Order",
                arguments: new QueryArguments(
                           new QueryArgument<IdGraphType> { Name = "id" }),
                resolve: context =>
                {
                    var id = context.GetArgument<object>("id");
                    var service = new SalesForceService(config);
                    var data = service.GetAccountByAccountID(id.ToString());
                    return data;
                });
        }
    }

应用程序可以在Visual Studio中正常编译。当我按F5键并在浏览器中运行它时。我得到这个回应

http://localhost:61625/api/graphql
{"":["The input was not valid."]}

当我尝试通过在体内传递以下参数来运行邮递员时

{
OperationName:"test",
NamedQuery: "Orders",
Query:{},
Variables:{id:"123"}
}

我收到此回复“ "A non-empty request body is required."

有人可以向我解释您如何请求graphql端点以及应该在邮递员的以下parm中传递哪些值。

{
OperationName:
NamedQuery: 
Query:,
Variables:
}

您如何通过react发出类似的调用,我们正在使用axios:。 如下面的示例所示,如何为调用设置参数。

 doRestCall = (id) => {
        const model = {
            variable: id
        };

        const headers = {
            'Content-Type': 'application/json'
        }



        Axios.post('http://localhost:49776/api/graphql', model, headers)
            .then(result => {
                debugger;
                console.log(result);

            });
        console.log(this.state);
    };

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

您似乎正在尝试通过NamedQuery使用“命名查询”,这是GraphQL的设计模式。通过具有众所周知的查询,可以在服务器上预定义和缓存该设计模式。查看您的Controller,您尚未实现命名查询。您将需要执行常规的GraphQL查询。

这是JavaScript的样子:

{
  query: "query MyOrderQuery($id: ID) { order(id: $id) { id name } }",
  variables: {
    id: "123"
  }
}

这将是JSON:

{
  "query": "query MyOrderQuery($id: ID) { order(id: $id) { id name } }",
  "variables": {
    "id": "123"
   }
}

请参见https://graphql-dotnet.github.io/docs/getting-started/variables

我还建议将Apollo与您的React组件一起使用。 https://www.apollographql.com/docs/react/essentials/get-started.html https://www.apollographql.com/docs/react/essentials/get-started.html#request