Abfragen von Daten aus graphql mit Express-graphql und HTTP-Client

Question

Im Schwierigkeiten macht eine HTTP-Anforderung auf einem Standard-apollo holen graphql-server-express

Ich habe versucht, im Anschluss an die Führung auf graphql.org ohne Erfolg.

Genau dies zu testen, ich die Fusetools News Feed Example verwenden und den Anruf holt mit einem Aufruf Umschalten, um apollo-Server unter Verwendung von Standard http:

`` `

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

` ``

Dies der vollständige Code mit nur die zurückgegebenen Felder geändert.

`` `

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

` `` Jede mögliche Anleitung würde sehr geschätzt werden. Vielen Dank.

Answer 1

Um fetch zu einem graphql-Server zu verwenden, war die richtige Syntax, die in meinem Fall funktionierte, die folgende. Danke, Daniel.

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