DEV Community

loading...
Cover image for React GraphQL Starter

React GraphQL Starter

jwp profile image John Peters ・3 min read

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...

Apollo Client

  • 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
Enter fullscreen mode Exit fullscreen mode
  • Now open VSC to that new folder via File/Open Folder

  • Install Node package dependencies and start the app.

npm install
npm run start
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

We'll focus on useQuery and useMutation first.

The first one:

 const { loading, error, data } = useQuery(GET_TODOS);
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
`;
Enter fullscreen mode Exit fullscreen mode

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

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()
});
Enter fullscreen mode Exit fullscreen mode

And this code:

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
document.getElementById('root')); 
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide