Skip to content

Instantly share code, notes, and snippets.

@littlelazer

littlelazer/relay-pass-variables-to-child-components-example.js

Forked from lukaswelte/relay-pass-variables-to-child-components-example.js
Created August 31, 2017 18:10
Show Gist options
  • Save littlelazer/cf8dc1520acd7829a1341c96f4d8ed2d to your computer and use it in GitHub Desktop.
Save littlelazer/cf8dc1520acd7829a1341c96f4d8ed2d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @lukaswelte lukaswelte renamed this gist Jun 3, 2016. 1 changed file with 0 additions and 0 deletions.
    0 sample.js → ...-variables-to-child-components-example.js
    View file
    File renamed without changes.
  2. @lukaswelte lukaswelte created this gist Jun 3, 2016.
    67 changes: 67 additions & 0 deletions sample.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    class ChildComponent extends React.Component {
    render() {
    const {hello} = this.props.greetings;
    return <h1>{hello}</h1>;
    }
    }

    const ChildContainer = Relay.createContainer(ChildComponent, {
    initialVariables: {
    name: 'A',
    },
    fragments: {
    greetings: () => Relay.QL`
    fragment on Greetings {
    hello(name: $name),
    }
    `,
    }
    });

    class ParentComponent extends React.Component {
    render() {
    // *** have to pass `name` prop here ***
    this.props.relay.setVariables({
    name: "Name",
    });
    return (
    <ChildContainer
    greetings={this.props.greetings}
    name={this.props.relay.variables.name}
    />
    );
    }
    }

    const ParentContainer = Relay.createContainer(ParentComponent, {
    initialVariables: {
    name: 'C',
    },
    fragments: {
    greetings: ({name}) => Relay.QL`
    fragment on Greetings {
    ${ChildContainer.getFragment('greetings', {name})},
    }
    `,
    }
    });

    class Route extends Relay.Route {
    static routeName = 'Hello';
    static queries = {
    greetings: () => Relay.QL`
    query GreetingsQuery {
    greetings,
    }
    `,
    };
    }

    ReactDOM.render(
    <Relay.RootContainer
    Component={ParentContainer}
    route={new Route({name: 'C'})}
    />,
    mountNode
    );