Continuation...

For the last 50 years SQL has been the most widely used Database in the world.

Then came no-sql which is more favorable to websites.

Then came qraphQL from the creators of React: Facebook.

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

Click Image for introduction...

• 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'

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.

  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:

 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.

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://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