apollo-client 1.0 breaking change: noFetch deprecated; use fetchPolicy about apollo-client-devtools

[helfer]

Thanks @100ideas !

Hm, I think that's going to start causing problems for us somewhat. We can update the devtools, but we'll have to know and check the version of Apollo Client to know which option to use.

Actually... we can probably just pass both options, because currently Apollo Client just ignores options that it doesn't know about 🤔

@100ideas would you be willing to make a PR to make this change?

[100ideas]

Tried hacking the Explorer component in Explorer.js to set fetchPolicy instead of noFetch, but I don't think this is working (still makes network requests if the query results haven't been cached?)

export default class Explorer extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      noFetch: true,
      fetchPolicy: 'cache-only',
      query: this.props.query,
      variables: this.props.variables,
    };

    try {
      evalInPage(
        `
        window.__APOLLO_CLIENT__.makeGraphiqlQuery = (payload) => {
          return window.__APOLLO_CLIENT__.query({
            query: payload.query,
            variables: payload.variables,
            fetchPolicy: payload.fetchPolicy,
          }).catch(e => ({
            errors: e.graphQLErrors,
          }));
        };
        `, (result, isException) => {}
      );
      console.log(`Explorer.js constructor eval'd makeGraphiqlQuery w/ fetchPolicy: '${this.state.fetchPolicy}'`)
    } catch(e) {
      console.warn(e);
    }

    this.graphQLFetcher = (graphQLParams) => {
      const { fetchPolicy } = this.state;
      console.log("Explorer.js:graphQLFetcher fetchPolicy: " + fetchPolicy)

      return createPromise(
        "window.__APOLLO_CLIENT__.makeGraphiqlQuery(" + JSON.stringify({
          operationName: graphQLParams.operationName,
          query: parse(graphQLParams.query),
          variables: graphQLParams.variables,
          fetchPolicy: `'${fetchPolicy}'`
        }) + ")"
      );
    };
  }

  componentDidMount() {
    if (ga) ga('send', 'pageview', 'GraphiQL');
    if (this.props.query) {
      this.graphiql.handleRunQuery();
    }
  }

  clearDefaultQueryState() {
    this.setState({ query: undefined, variables: undefined });
  }

  render() {
    const { noFetch } = this.state;
    const graphiql = (
      <GraphiQL
        fetcher={this.graphQLFetcher}
        query={this.state.query}
        onEditQuery={() => { this.clearDefaultQueryState() }}
        onEditVariables={() => { this.clearDefaultQueryState() }}
        variables={this.state.variables}
        ref={r => {this.graphiql = r}}
      >
        <GraphiQL.Toolbar>
          <label>
            <input
              type="checkbox"
              checked={noFetch}
              onChange={() => {
                let fetchPol = noFetch ? 'network-only' : 'cache-only';
                this.setState({ noFetch: !noFetch, fetchPolicy: fetchPol, query: undefined, variables: undefined });
              }}
            />
            Load from cache
          </label>
        </GraphiQL.Toolbar>
      </GraphiQL>
    );

    return <div className="body">{graphiql}</div>;
  }
}

[100ideas]

It's unlikely I'll spend time on this in the near future, but I will remember this thread if I do.