React GraphQL Starter
Tags: react, graphql
Published: 2021-02-11 16:22:02

Continuation...

For the last 50 years [SQL](https://en.wikipedia.org/wiki/SQL) has been the most widely used Database in the world.

Then came [no-sql](https://en.wikipedia.org/wiki/NoSQL) which is more favorable to websites.

Then came [qraphQL](https://en.wikipedia.org/wiki/GraphQL) from the creators of React: Facebook. 

Today we explore the internals of graphQL using the Apollo Client. 

Click Image for introduction...
# <a href="https://www.apollographql.com/docs/tutorial/introduction/"><img src="https://user-images.githubusercontent.com/841294/53402609-b97a2180-39ba-11e9-8100-812bab86357c.png" height="100" alt="Apollo Client">
</a>

- Open VSC and then Terminal, paste this command and press enter.

```
git clone https://github.com/Nata-Roma/Todos-project-using-React-and-GrapgQl.git
```
- Now open VSC to that new folder via File/Open Folder

- Install Node package dependencies and start the app.

```
npm install
npm run start
```
The rendering is not great, which is ok because we're after 'how it's done, not how it looks'

```javascript
import { useQuery, useMutation, gql } from "@apollo/client";
```
useQuery, useMutation, and qql are functions provided by the Apollo Client. 

Later in the App we see these statements using those functions.

```javascript
  const [textTodo, setTextTodo] = useState('');
  const { loading, error, data } = useQuery(GET_TODOS);
  const [toggleTodo] = useMutation(TOGGLE_TODO);
  const [addTodo] = useMutation(ADD_TODO, { onCompleted: () => setTextTodo('') });
  const [deleteTodo] = useMutation(DELETE_TODO);
```
We'll focus on useQuery and useMutation first.

The first one:
```javascript
 const { loading, error, data } = useQuery(GET_TODOS);
```
Says, we want to issue a Get_Todos query and expect the client to return the varibles named loading, error and data. 

GET_TODOS is the 'url-like' endpoint contained in our program.

```
const GET_TODOS = gql`
  query getTodos {
    todos {
      done
      id
      text
    }
  }
`;
```
GET_TODOS uses a graphQL function named 'qql' to pass in the the query string; which, describes the pattern of the data to return. 

**Data Origin**
When we first ran the app Todos just appeared. But where did they come from? To find out we opened the browser pressed F12 went to the network tab. Then we hit CTL F5 to reload the page and this is what showed up.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/svii9vhyzke8ilelus0q.jpg)

An outbound HTTPRequest to graphQL which returned the data "test".

How'd that happen? ahh... we found it in the index.js file.

```
const client = new ApolloClient({
  uri: 'https://firstgraphql.hasura.app/v1/graphql',
  cache: new InMemoryCache()
});
```
And this code:
```
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
document.getElementById('root')); 
```
This code implies an ApolloProvider is made available to our root element of which our app runs. Any references to the Apollo functions will automatically use the 'client'. 

The Apollo Client shown was created with just a URL and cache configuration. This was the destination of that outbound request shown above.

**Hasura**
Who is [Hasura](https://en.wikipedia.org/wiki/Hasura)?
```
https://firstgraphql.hasura.app/v1/graphql

```
Why of course, they're a cloud company providing graphQL services.

The data returned was from that service endpoint.

Summary:
- JSON based no-SQL databases are better for web performance than SQL.
- The Apollo client must have a URL to connent.
- qql,useQuery, usemutation are all 'hooks' to use the client.
- The queries define the structure of the data to be returned.
- useQuery returns 3 things: data, loading and error values.

TODO: Fix the page to look presentable.


JWP2021 Graphql getting started