It's actually a simpler paragraph than you realise, in this sentence imperative is explaining how one might choose to write out a graphql react component as:
import React from 'react';
import { Query } from 'react-apollo';
const Profile = () => (
<Query query={}>
{() => <div>My Profile</div>}
</Query>
);
export default Profile;
While this component doesn't actually make a query because no query is provided we are imperatively programming it. Imperative in the sense we are providing the query into the component and the HOC triggers the query or mutation and passes it into the props. In this example we can step through the code from creating the HOC and adding a query to calling it via props on the component. Though it's interesting to note that a GraphQL query on it's own is declarative in nature.
Declarative is best characterised as describing what we would like and in the apollo client the best way to visualize this is through a functional component.
const LAST_LAUNCH = gql`
query lastLaunch {
launch {
id
timestamp
}
}
`;
export function LastLaunch() {
const { loading, data } = useQuery(LAST_LAUNCH);
return (
<div>
<h1>Last Launch</h1>
{loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>}
</div>
);
}
In this example you can see we are essentially executing this query / mutation using
const { loading, data } = useQuery(LAST_LAUNCH);
This line of code describes using the query written above what we would like to be returned making it a declarative statement.
In simplistic terms the HOC component in example one has several steps that you can follow before you could use your data. In the second example we are simply describing what we would like in a single statement and receiving back the data.
Finally it's also important to mention that in programming we generally have a mixture of imperative and declarative statements / blocks of code throughout our application and it's perfectly normal.