This article assumes you've followed the previous article about app templates, and have your basic app template ready. If not, please go to Basic Template and setup a basic React app.
In this article we'll continue working on the app template created in the previous article and setup
Apollo Provider so our app can talk to our GraphQL API. You'll also learn how to get access to your
api stack information and pull the GraphQL API URL into your React app during build time.
Adding Apollo Provider
In the last article, we left off with our App Template looking like this:
Now let's add another
AppTemplateRendererPlugin and render an
With this new plugin, we've added a top-level component, an
<ApolloProvider> to be able to use ApolloClient anywhere in the app.
<ApolloProvider> needs an instance of ApolloClient to work. We'll create a factory function that will return an instance of ApolloClient. This way we'll be able to pass options to this factory via our App Template options if necessary.
This is just one way of creating an Apollo Client. It's totally up to you how you'll organize your template, your files, etc.
createOmitTypenameLink is a utility link that will remove the
__typename field from the response data so that it doesn't interfere with your mutations when you submit your data using, for example, a form.
If you now open your app in the browser, you will still see the same
Welcome! message, but if you inspect your app using React Dev Tools, you'll see your
<BrowserRouter> and the
In this article we haven't done much visually, but we've setup our gateway to the GraphQL API, which will be very important in the future. Also, you are already using the main development principle in Webiny - plugins! And we can already see how flexible this approach is.
At this point, your app is ready to communicate with the API. However, we still need to talk about
process.env.REACT_APP_GRAPHQL_API_URL. We'll cover this in the next article.