2021 03 08

• Redis can replace the need to store the “user” state in local app such as localstorage. Redis acts as mini data store to quickly retreive the state of the user.
• The redis app stay in sync with the client by the user of Cookies. The cookie can be configured to httpOnly so it cant be tampered with JavaScript.
• If the client responds without a cooke, an invalid one or one that has timed out, the user is effectively “logged out”.

Learning how to use apollo client in a React code base

• First we import ApolloClient, InMemoryCache and ApolloProvider from "@apollo/client"; in our root react component a.k.a index.tsx
• Setup the ApolloClient instance like so:

const client = new ApolloClient({
  uri: "http://localhost:9090/graphql",
  credentials: "include",
  cache: new InMemoryCache({
    resultCaching: false,
  }),
});

Esure the backend has cors enabled and it aware of what domain and port the react client is running under.

• Finally we can wrap main React <App/> in the <ApolloProvider/> and provider it a client prop which is is the client object created above.

• Now we can make queries to the GQL server in any component like so:

  • import React, { useEffect, useState } from "react";
    import { gql, useQuery } from "@apollo/client";
    
    const myGQLQuery = gql`
      query GetAllCategories {
        getAllCategories {
          id
          name
        }
      }
    `;
    const MyComponent = () => {
      const { loading, error, data } = useQuery(myGQLQuery);
    
      return (
        <div className="leftmenu">
          {loading ? (
            <span> loading </span>
          ) : error ? (
            <span> Error </span>
          ) : (
            <span> data </span>
          )}
        </div>
      );
    };
    
    export default MyComponent;

• Learning about useLazyQuery hook in apollo client. Which lets you execute graphql quries on demand. Also useful when used in tandem with graphql variables, when using making the call the graphql query in javascript you can supply a parameter to the graphql argument by supplying a an object which has a variables object nested within it.