React-apollo: Recursive Components

[appjitsu]

I have a parent component where I'm calling the following child component. Inside the child component, it can also recursively call itself to load more nodes. The problem I am running into is that compose does not fire off the graphql query for the recursive calls. Props only has the "actionId" that I passed in.

import React, { Component } from 'react';
import { compose, graphql } from 'react-apollo';

import query from '../queries/Action';

class Action extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log('action props: ', this.props);
    if (!this.props.data) { return <div>-</div>; }

    const { loading, action } = this.props.data;
    if (loading) { return <div>-</div>; }

    let children;
    if (action.actions) {
      children = action.actions.map(({ id }) => {
        return <div key={id}><Action actionId={id} /></div>;
      });
    }

    return (
      <div className="row">
        <h3>{action.label}</h3>
        <div>
          {children}
        </div>
      </div>
    );
  }
}

export default compose(
  graphql(query, {
    options: (props) => { return { variables: { id: props.actionId } }; }
  }),
)(Action);

In the console.log in Chrome:

the first use of the Action component works when called from the parent component
-- action props: Object {actionId: "590767de2c385109511ad996", data: Object}

recursion for the Action component is missing the data object and there is no call to graphql in the network tab in chrome
-- action props: Object {actionId: "590767de2c385109511ad999"}

[jbaxleyiii]

@appjitsu could you provide a reproduction using https://github.com/apollographql/react-apollo-error-template?

[derek-duncan]

@appjitsu It looks like you're not seeing the graphql query fire because you're calling the raw react component recursively, not the graphql connected one. Try wrapping your component definition in the graphql function.

Example using a functional component

const enhancer = compose(
  graphql(query, {
    options: (props) => { return { variables: { id: props.actionId } }; }
  }),
);

const Action = enhancer((props) => {
    console.log('action props: ', this.props);
    if (!this.props.data) { return <div>-</div>; }

    const { loading, action } = this.props.data;
    if (loading) { return <div>-</div>; }

    let children;
    if (action.actions) {
      children = action.actions.map(({ id }) => {
        return <div key={id}><Action actionId={id} /></div>;
      });
    }

    return (
      <div className="row">
        <h3>{action.label}</h3>
        <div>
          {children}
        </div>
      </div>
    );
});

[appjitsu]

Ah wow… yeah that makes sense. Thanks for pointing that out. I will try that and get back to you.

On May 5, 2017, at 4:28 PM, Derek Duncan [e-mail] wrote:

@appjitsu https://github.com/appjitsu It looks like you're not seeing the graphql query fire because you're calling the raw react component recursively, not the graphql connected one. Try wrapping your component definition in the graphql function.

Example using a functional component https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components
const enhancer = compose(
graphql(query, {
options: (props) => { return { variables: { id: props.actionId } }; }
}),
);

const Action = enhancer((props) => {
console.log('action props: ', this.props);
if (!this.props.data) { return

-

; }

const { loading, action } = this.props.data;
if (loading) { return <div>-</div>; }

let children;
if (action.actions) {
  children = action.actions.map(({ id }) => {
    return <div key={id}><Action actionId={id} /></div>;
  });
}

return (
  <div className="row">
    <h3>{action.label}</h3>
    <div>
      {children}
    </div>
  </div>
);

});
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/apollographql/react-apollo/issues/673#issuecomment-299580134, or mute the thread https://github.com/notifications/unsubscribe-auth/AKZgMP0OE1_sEoLrrKxzzjHyIwMxnP1yks5r25RqgaJpZM4NNRf-.

[appjitsu]

@derek-duncan This does indeed work! Thanks! :beer: