Game of Thrones Quiz Game with React and GraphQL: Initiate Backend Connection

Celý článek

Now that our frontend application is running, the next step is to set up the client to communicate with the server. We’ll make use of the apollo-boost package to achieve this. The package provides a client for connecting to the GraphQL backend. Let’s update the App.js file to set up the ApolloClient.

import React from 'react';
import { ApolloProvider } from 'react-apollo';
import ApolloClient from "apollo-boost";

import Questions from './components/questions';
import './App.css';

const client = new ApolloClient({
  uri: <YOUR_API_URL>
});

function App() {
  return (
    <ApolloProvider client={client}>
    <div className="App">
      <Questions/>
    </div>
    </ApolloProvider>
  );
}

export default App;

The ApolloClient takes an object with a uri property as an argument, with this, the client gives us access to fetch, update and delete data using the provided uri. Ensure to replace the placeholder value with your actual endpoint.

We then wrap the application with the ApolloProvider that takes a single prop, the client. The ApolloProvider loads the 8base table schema, which gives you access to all properties of the data model inside your front end code.

Let’s add some application-wide styles to the App.css file. Open the file and replace the contents with the following:

@font-face {
  font-family: "GOT";
  font-style: normal;
  font-weight: 400;
  src: local("GOT"), local("GOT"), url("./fonts/got.ttf") format("truetype");
}
body,
html {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
}
body{
  min-height: 100vh;
}
.App {
  margin: auto;
  background: white;
  min-height: 100vh;
}
header {
  font-family: GOT;
  padding: 20px 5px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  background: white;
}
button:focus{
  border: none;
  outline: none;
}

You can find the font asset loaded on GitHub here.