Frontend

Backend works. Now let’s start analyzing the InfernoJS frontend. Start with the index.js file in the /src folder.

Inferno.render(

<ApolloProvider client={client}>

<App />

</ApolloProvider>,

document.getElementById('app')

);

Okay. We tell Inferno to render all it’s content into the div with the ID ‘app’. Before we do that, we nest our App component with the ApolloProvider. This provides the graphQL logic throughout the app.

But whats this {client} attribute on ApolloProvider and where is it coming from?

For this, we have to have a loot into /src/shared/graphql/apolloClient.js.



networkInterface : createNetworkInterface({

uri : '

})

}); export default new ApolloClient({networkInterface : createNetworkInterface({uri : ' http://localhost:4000/graphql' })});

In this file we define the network interface and tell the underlaying apollo-client where to find our graphQL backend. In our demo case it’s on the node/express server which runs on localhost:4000. Please note, that there is also a shortcut if your graphQL endpoint is on the same server and listing on /graphql route. For this you could just use:

export default new ApolloClient();

So no further config required.

Now our demo app is ready to query the graphQL backend. Let’s checkout the index.js file in /src/App.

const App = (props) => (

<div className="App">

<div className="App-header">

<Logo width="80" height="80"/>

<h2>Welcome to Inferno with Apollo</h2>

</div> <FilmList /> </div>

); export default App;

Here we have our first pure functional component. A function receiving props and returning JSX. Beside the rendering info for the header you see the next component called ‘FilmList’ is placed as child of the App component. So let’s have a look into this file next (/src/Films/index.js).

Since this is a looooong file, we should walk through it in pieces. Starting with the components “render” function:

const List = (props) => (

<div>

<h1>Film-List</h1>

<ul className="List">

{

props.data.allFilms &&

props.data.allFilms.edges &&

props.data.allFilms.edges.map(renderFilm)

}

</ul>

</div>

);

Looks really similar to the App component we’ve seen before. We can imagine by looking at the props, that this component will get ‘data’ passed on props and on data are ‘allFilms’, another object. But where are this coming from? We didn’t define any props in /src/App/index.js where we included the ‘FilmList’ component. This is the result of our graphQL query we define in this component:

const query = gql`

query AllFilms {

allFilms {

edges {

node {

title

director

}

}

}

}

`;

If you compare the JSON like syntax of this query with the structure we’re expecting in the render function, it makes perfectly sense! Except where the key ‘data’ is coming from. This is the default wrapper for the apollo-client. You can also configure this if you don’t like the name ‘data’.

Now it’s time to compose the query with the component:

export default compose(

graphql(query),

)(List);

Okay, that’s it! Nice right?