Apollo client

In the previous post for Querying data with GraphQL we used a ASP.NET Core HTTP client. But as I have mentioned there is an option to fetch the data with JavaScript using a client called Apollo.

Apollo is a very good choice of library if you are building an application with GraphQL because of its flexibility and simple use. Like it is written in its documentation it is a complete platform for implementing a graph over your data. It includes two runtime libraries, Apollo Server and Apollo Client

Let’s adapt the example from the GraphQL article by using the Apollo Client and instead a Web API application we are going to create a web site by cloning all of the structure, objects and content from the API project.

So now our Get() method in the ValuesController would return a View with the values model:

var values = client.GetValues();
return View(values);

We are going to create the View and inside it just render the data.
The important part here is that we need to import the Apollo client library like so:

<script src="https://unpkg.com/apollo-client-browser@1.9.0"></script>

Now let’s add a custom script file where we are going to create the Apollo client and write our query:

// Create the Apollo client
const apolloClient = new Apollo.lib.ApolloClient({
    networkInterface: Apollo.lib.createNetworkInterface({
        uri: 'https://localhost:<port>/graphql'
    })
});

// The GraphQL query
const valuesQuerry = Apollo.gql'
query values 
      { 
          id name quantity description 
      }';

apolloClient.query({
      query: valuesQuery
    }).then(result => {
      // Use the result.data object to consume the data from the server and render it in the view
        . . .
    });

Finally include the newly created script in the view.