使用 express-graphql 和 HTTP 客户端从 graphql 获取数据

Posted 2023-03-08

【中文标题】使用 express-graphql 和 HTTP 客户端从 graphql 获取数据

【英文标题】：Fetching data from graphql with express-graphql and HTTP client

【发布时间】：2017-03-19 11:18:51

【问题描述】：

我很难在标准 apollo graphql-server-express 上发出 HTTP 获取请求

我已尝试按照graphql.org 上的指导进行操作，但无济于事。

只是为了测试这一点，我正在使用 Fusetools News Feed Example 并使用标准 http 调用 apollo-server 来切换 fetch 调用：

```

fetch('https://localhost:8080/graphql', 
                "method": 'POST',
                "headers":  "Content-type": "application/graphql", "Accept": "application/json",
                "body": "query": " places  id name address city " 
            )
            .then(function(response)  return response.json; )
            .then(function(responseObject)  data.value = responseObject; );

```

这是完整的代码，仅更改了返回的字段。

```

<DockPanel>
    <javascript>
        var Observable = require("FuseJS/Observable");

        var data = Observable();
        fetch('https://localhost:8080/graphql', 
            "method": 'POST',
            "headers":  "Content-type": "application/graphql", "Accept": "application/json",
            "body": "query": " places  id name address city " 
        )
        .then(function(response)  return response.json; )
        .then(function(responseObject)  data.value = responseObject;                );


        module.exports = 
            dataSource: data
        ;
    </JavaScript>

    <StatusBarBackground Dock="Top" />
    <BottomFrameBackground Dock="Bottom" />

    <StackPanel Dock="Top">
        <Text FontSize="28" Alignment="VerticalCenter"
            TextAlignment="Center" Padding="2"
            Value="NEWS" />
        <Rectangle Height="1" Margin="0,3,0,0" Fill="#333c48" />
    </StackPanel>

    <Text ux:Class="Header" Margin="10,10,10,5" TextWrapping="Wrap" FontSize="22" />
    <Text ux:Class="Article" Margin="10,0,10,0" TextWrapping="Wrap" FontSize="13" />
    <Text ux:Class="PublishedDate" Margin="10,0,10,0" FontSize="13" Color="#999" />

    <ScrollView>
        <StackPanel Alignment="Top">
            <Panel Height="7" />
            <Each Items="dataSource.data.places">
                <Panel ux:Class="HorizontalBar" Margin="46,10,0,10"
                        Alignment="VerticalCenter">
                    <Rectangle Height="1" Fill="#dcdee3" />
                </Panel>

                <Header Value="name" />
                <Article Value="address" />
                <PublishedDate Value="city" />
                <HorizontalBar />
            </Each>
        </StackPanel>
    </ScrollView>

</DockPanel>

``` 任何指导将不胜感激。谢谢。

【参考方案1】：

要使用 fetch 到 graphql 服务器，适用于我的情况的正确语法如下。谢谢，丹尼尔。

fetch('https://graphql-swapi.parseapp.com/', 
  method: 'POST',
  headers:  "Content-type": "application/json", "Accept": "application/json",
  body: JSON.stringify("query":"allFilms totalCount","variables":null,"operationName":null)
).then(function(response)  return response.json(); )
.then(function(responseObject)  console.log('GOT', JSON.stringify(responseObject, null, '  ')); );