This is a partner frontend to the GraphQL-Workshop repo here where you build an Elixir graphql API, but it can be used in its own right as an example Apollo implementation.
To run the backend from the elixir workshop, make sure you've checked out the my-first-complete-api branch and run the server with the command mix phx.server.
To run this app:
Ensure you have yarn installed
Install the dependencies
yarn install
Start the front-end:
yarn start
Navigate to http://localhost:1234 to see the app render the data from your GraphQL API!
Below you'll find a breakdown of how this app was created step by step.
These steps assume you have a basic React App set up. If you don't, there are instructions at the bottom of this readme to create one. It also requires yarn (which is an npm alternative, see above).
yarn add apollo-boost @apollo/react-hooks graphql
First you'll need to import ApolloClient and ApolloProvider in index.js
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";Then, create your client, providing the endpoint for your backend graphql server
const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
});Finally, wrap your App in a <ApolloProvider/> component, passing in the client you just created as a prop called client.
Your index.js file should now look something like this:
import React from "react";
import { render } from "react-dom";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";
const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
});
const App = () => (
<ApolloProvider client={client}>
<main>
<h1>My GraphQL app 🚀</h1>
</main>
</ApolloProvider>
);
render(<App />, document.getElementById("app"));There's more than one way to skin a fish, and there's also plenty of ways to query with Apollo. In this example, I've used a react-apollo hook called useQuery, as its new and cool.
Create a new file for your query component - I've called it Addresses.js as I'm querying for addresses.
Import React, gql and useQuery.
import React from "react";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";Next, write your graphql query inside gql tags like so:
const GET_ADDRESSES_QUERY = gql`
query getAllAddresses {
getAddresses {
id
houseNumber
postcode
}
}
`;You can then simply use your query in the useQuery hook inside a component, and destructure out the data, loading and error keys. These can then be used to render different views or display the data.
export const Addresses = () => {
const { loading, error, data } = useQuery(GET_ADDRESSES_QUERY);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<div>
<h2>List of addresses</h2>
<ul>
{data.getAddresses.map(({ id, postcode, houseNumber }, index) => (
<li key={index}>
{houseNumber}, {postcode}
</li>
))}
</ul>
</div>
);
};All that's left to do is import and use the Addresses component in index.js
Thats it! Run your app and check it out in the browser, see if you can see your addresses :)
Why not try using the createAddress mutation (and the useMutation hook), in a form to add more addresses?
- Create repo
mkdir react-frontend
cd react-frontend
yarn init -y
git init
-
Ensure parcel-bundler is installed -
yarn global add parcel-bundler -
Add required dependencies
yarn add react
yarn add react-dom
yarn add --dev parcel-bundler
- Add
.babelrcfile to tell parcel its a react app:
{
"presets": ["env", "react"]
}
- Create boilerplate files:
index.html,index.js
<!DOCTYPE html>
<html>
<head>
<title>Graphql app</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>import React from "react";
import { render } from "react-dom";
const App = () => (
<main>
<h1>My GraphQL app 🚀</h1>
</main>
);
render(<App />, document.getElementById("app"));- Add start script to
package.json
"scripts": {
"start": "parcel index.html",
},- Start server
yarn startand check its working! Should be visible onlocalhost:1234