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

Question

我在一个标准的apollo graphql-server-express上做HTTP fetch请求有困难

我试着遵循graphql.org上的指导，但没有效果。

为了测试这一点，我使用了Fusetools News Feed Example，并使用标准http调用了对apollo-server的fetch调用：

```javascript

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

这是完整的代码，只是返回的字段发生了变化。

​

```javascript

<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>

Answer 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, '  ')); });