connect frontend with backend

Author: stacykutyepov

app/app/settings.py

@@ -31,6 +31,7 @@
 # Application definition
 
 INSTALLED_APPS = [
+    'corsheaders',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -49,6 +50,8 @@
 }
 
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
+    'django.middleware.common.CommonMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -59,6 +62,12 @@
     'django.contrib.auth.middleware.AuthenticationMiddleware',
 ]
 
+# CORS_ALLOWED_WHITELIST = (
+#     'localhost:3000'
+# )
+CORS_ALLOWED_ORIGINS = [
+    'http://localhost:3000'
+]
 AUTHENTICATION_BACKENDS = [
     'graphql_jwt.backends.JSONWebTokenBackend',
     'django.contrib.auth.backends.ModelBackend',

react-books-client/src/Root.js

@@ -1,6 +1,29 @@
 import React from "react";
 import withRoot from "./withRoot";
+import {Query} from 'react-apollo';
+import {gql} from "apollo-boost";
 
-const Root = () => <div>Root</div>;
+const Root = () => (
+<Query query={GET_TRACKS_Q}>
+{({ data, loading, error })=> {
+    if (loading) return <div>loading...</div>
+    if (error) return <div>error</div>
+
+    return <div>{JSON.stringify(data)}</div>
+}}
+
+</Query>
+);
+
+const GET_TRACKS_Q = gql`
+{
+    books {
+        id
+        title
+        author
+        description
+    }
+}
+`
 
 export default withRoot(Root);

react-books-client/src/index.js

@@ -3,7 +3,20 @@ import ReactDOM from "react-dom";
 import Root from "./Root";
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<Root />, document.getElementById("root"));
+import { ApolloProvider } from 'react-apollo'
+import ApolloClient from 'apollo-boost'
+
+
+const client = new ApolloClient({
+    uri:"http://localhost:8000/graphql/"
+})
+
+ReactDOM.render(
+<ApolloProvider client={client}>
+    <Root />, 
+</ApolloProvider>,
+document.getElementById("root")
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.