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

【问题标题】：Fetching data from graphql with express-graphql and HTTP client使用 express-graphql 和 HTTP 客户端从 graphql 获取数据
【发布时间】：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>

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

【问题讨论】：

标签： http express fetch graphql-js apollo-server

【解决方案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, '  ')); });

【讨论】：