We are now at the point where we need to make the GraphQL query to do the actual search:

1. Let's start by creating an interface for the repository data we expect to get back from the query:

interface IRepo {
  id: string;
  name: string;
  description: string;
  viewerHasStarred: boolean;
  stargazers: {
    totalCount: number;
  };
  issues: {
    edges: [
      {
        node: {
          id: string;
          title: string;
          url: string;
        };
      }
    ];
  };
}

This is the structure we got back from the GitHub GraphQL Explorer in an earlier section.

2. We are going to need a default value for this state. So, let's define this:

const defaultRepo: IRepo = {
  id: "",
  name: "",
  description: "",
  viewerHasStarred: false,
  stargazers: {
    totalCount: 0
  },
  issues: {
    edges: [
      {
        node: {
          id: "",
          title: "",
          url: ""
        }
      }
    ]
  }
};

3. We can also define an interface for the query result as a whole:

interface IQueryResult {
  repository: IRepo;
}

4. Now we can create the query itself using a tagged template literal:

const GET_REPO = gql`
  query GetRepo($orgName: String!, $repoName: String!) {
    repository(owner: $orgName, name: $repoName) {
      id
      name
      description
      viewerHasStarred
      stargazers {
        totalCount
      }
      issues(last: 5) {
        edges {
          node {
            id
            title
            url
            publishedAt
          }
        }
      }
    }
  }
`;

This is the query we made in the GitHub GraphQL Explorer in an earlier section. Unlike our previous queries, this one has parameters that we'll need to include when we execute the query a little later.

5. We need to store the data we get from the query in state. So, let's create a state variable called repo, along with a function to set it:

const [repo, setRepo]: [
    IRepo,
    (repo: IRepo) => void
  ] = React.useState(defaultRepo);

6. We are also going to store any problems with the search in state as well:

const [searchError, setSearchError]: [
  string,
  (searchError: string) => void
] = React.useState("");

7. Let's update the handleSearch arrow function to clear any search error state before we do the search:

const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();

  setSearchError("");
};

8. Let's go on and use ApolloClient passed in as a prop to make the query:

const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  
  setSearchError("");

  props.client
    .query<IQueryResult>({
      query: GET_REPO
    });
};

9. There is more work to do here, though. First, we need to pass in the query parameters for the organization name and repository name from the values we have in our search state:

.query<IQueryResult>({
  query: GET_REPO,
  variables: { orgName: search.orgName, repoName: search.repoName }
})

10. Now it's time to handle the response in the then method and set the repo state to the data in the response:

props.client
  .query<IQueryResult>( ... )
  .then(response => {
    setRepo(response.data.repository);
  });

11. We will also handle any errors in the catch method and update the searchError state:

props.client
  .query<IQueryResult>(...)
  .then(...)
  .catch(error => {
    setSearchError(error.message);
  });

If we try a search in the running app, the query will be made okay, but we are not showing the results yet. Let's do that in the next section.