GraphQL Variables and Arguments in React

Next, we’ll make use of the form and input elements. They should be used to request the data from GitHub’s GraphQL API when a user fills in content and submits it. The content is also used for the initial request in componentDidMount() of the App component. So far, the organization login and repository name were inlined arguments in the query. Now, you should be able to pass in the path from the local state to the query to define dynamically an organization and repository. That’s where variables in a GraphQL query came into play, do you remember?

First, let’s use a naive approach by performing string interpolation with JavaScript rather than using GraphQL variables. To do this, we will refactor the query from a template literal variable to a function that returns a template literal variable. By using the function, you should be able to pass in an organization and repository.