Game of Thrones Quiz Game with React and GraphQL: Set up GraphQL Query For the Quiz Questions

Celý článek

Now we’ll create a component to render the data in the 8base backend. This component will handle the fetching of data using GraphQL queries and will render the fetched data accordingly. To get started, create a folder components in the /src directory. Then, a folder within the src/components directory called questions and within that a file called index.js.

This should be the path for the Questions component:

    /src/components/questions/index.js

Open the file and copy the following snippet. First, we’ll begin with the query. The query will be built using GraphQL HOC (Higher Order Component). The function will receive a component as an argument, it’ll pass the data fetched to the component.

//src/components/questions/index.js

import React from "react";
import gql from "graphql-tag";

const GET_QUESTIONS_QUERY = gql`query {
    questionsList {
      items {
        question
        options
        answer
        image
      }
    }
  }`;

Next, we’ll use the query using the graphql HOC. This function takes the query string and config options.

//src/components/questions/index.js

import React from "react";
import gql from "graphql-tag";
import { graphql } from "react-apollo";

const GET_QUESTIONS_QUERY = gql`// ... query string`;

export default graphql(GET_QUESTIONS_QUERY, {
  props: result => {
    const { loading, data } = result;
    let items = [];
    if (data && data.questionsList) items = data.questionsList.items;
    return {
      loading,
      questions: items
    };
  }
})(Questions);

The graphql function returns a function which will inject any component with reactive GraphQL capabilities. This follows the React higher-order component pattern which is also used by react-redux’s connect function.

By making use of the graphql() function, we are able to query our backend, it takes a query as its first parameter, config as the second, and the return value is a HOC that should be executed with the desired component as an argument. In this example, we specify that our data will be accessible as props.questions.

The query itself GET_QUESTIONS_QUERY, has been designed using the schema in the 8base database. The query itself can be designed and validated in the API explorer provided by 8base. You can navigate to the API Explorer and paste the GET_QUESTIONS_QUERY to see what data will be returned.

To see actual data from your query, you can populate the data store using the following data. You have to enter the data manually for each field. Navigate to Data > Questions > Data and fill the fields. **