fetching-data-from-graphql-with-express-graphql-and-http-client with fusetools

Im having difficulty making an HTTP fetch request on a standard apollo [graphql-server-express] https://github.com/apollostack/graphql-server

I’ve tried following the guidance on [graphql.org] http://graphql.org/graphql-js/graphql-clients/ to no avail.

Just to test this, I am using the [Fusetools News Feed Example] https://www.fusetools.com/examples/news-feed and switching out the fetch call with a call to apollo-server using 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; });

This the full code with with just the returned fields changed.


<App>

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

Any guidance would be greatly appreciated. Thank you.

This is the correct format.


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

alain@klik.io wrote:

This is the correct format.

Hi! Does this mean you were able to fix the issue you were having?

Yes. Thank you.