I’m building a data intensive app on react-apollo and its great, however development is slow due to waiting times on GQL queries. I’m developing with a remote database, so I guess I could make it faster by duplicating the database to client, however I feel that we can do better since with GQL duplicating the data source might often not be an option.
I was wondering if there might be a way to run react-apollo on development mode (maybe though a chrome tool or a dev package), where all query results can be cached to fast reload on code changes. And then maybe just pass a argument when cache should be refreshed for a query. Thus the query result is stored locally between code changes and thus instantly resolve on reload - for me this would cut 2 min of dev time on every code change which amount to lots of time saved!
Currently I’m manually injecting the query results by uncommenting the graphql function, which works fine, but there must be a better way, and this is also difficult to implement on all queries in my app since some of the routes is very dynamic.
This is how I currently do it in a manual way:
// DEVELOP MODE //
import { dashboardResult } from './test/dashboardResult.json';
const GQLConnect = (props) => {
return (
<ConnectedDashboard {...props} loading={false} dashboard={dashboardResult.data.dashboard} />
);
}
/* // LIVE QUERIES //
const CleanComponent = ({company, data}) => (
<ConnectedDashboard company={company} loading={data.loading} dashboard={data.dashboard}/>
);
const GQLConnect = graphql(GQL, {
options: ({match, company}) => {
return({
variables: {
company: company.company,
dashId: match.params.dashId
},
})
}
})(CleanComponent);
*/
This works ok, but surely there must be a better way? Any ideas? maybe a chrome dev tools setting?