Support React v16.3 context API

[jaydenseric]

Function as children components are becoming very popular. In React v16.3 the new context API uses this pattern.

How do you walk into the children functions, so you can keep recursing the tree and visit deeper components?

For context, I am attempting to SSR Query components in graphql-react.

[jaydenseric]

Ok, so it turns out my issue is not with function as children components.

With a simple test eventually foobar logs as the deepest node, as expected:

const TestComponent = ({ children }) => children('foobar')
const tree = <TestComponent>{message => <p>{message}</p>}</TestComponent>

reactTreeWalker(
  tree,
  element => {
    console.log(element)
    return true
  }
)

What does not work is Consumer from the new React context API:

const { Provider, Consumer } = React.createContext()
const tree = (
  <Provider value={{ message: 'foobar' }}>
    <Consumer>{({ message }) => <p>{message}</p>}</Consumer>
  </Provider>
)

reactTreeWalker(
  tree,
  element => {
    console.log(element)
    return true
  }
)

The deepest node is logged as [Function]. It seems the logic incorrectly thinks Consumer is a basic string or dom node element.

[ctrlplusb]

Looks like this is ready to be worked on 😀

https://github.com/apollographql/react-apollo/pull/1742/files#diff-f8938b597e7a7647b9ea5589d55d3a26

@jaydenseric are you happy with running with this?

[jaydenseric]

@ctrlplusb thanks, but I've already worked it out in graphql-react: https://github.com/jaydenseric/graphql-react/blob/master/src/preload.mjs#L96

[oyeanuj]

@ctrlplusb Can I come back to the original question at the start of the thread by @jaydenseric:

How do you walk into the children functions, so you can keep recursing the tree and visit deeper components?

What is the expected behavior here?

[jaydenseric]

@ctrlplusb relevent discussion: facebook/react#12501 (comment)

[lemonmade]

Has anyone taken this up? Would really like to convert a project using tree-walker to use new React context.

[ctrlplusb]

@lemonmade not as of yet. Would you be open to giving it a shot via a PR?

[dan-lee]

@ctrlplusb I tried something, maybe the PR can serve as a starting point?

[ctrlplusb]

Just merged @dan-lee's and published work on this. 🎉