如何使用 Axios 从 React 组件调用带有 .Net 核心的 Graphql？

Question

我是 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; }
    }

用于反序列化的模型 Class

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

        }
    }

调用销售人员服务的查询class

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 端点发出请求以及应该在邮递员的以下参数中传递哪些值。

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

非常感谢您的帮助。

Answer 1

您似乎在尝试将 "named queries" 与 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

如何使用 Axios 从 React 组件调用带有 .Net 核心的 Graphql？

How to call Grpahql with .Net core from a React component using Axios?

reactjs

graphql

asp.net-core-webapi

asp.net-core-2.0

graphql-dotnet