Forem: Akuagwu Philemon

Getting Started with React, Fauna and URQL

Akuagwu Philemon — Tue, 27 Apr 2021 23:06:30 +0000

Written in connection with the Write with Fauna program.

Introduction

Using a Todo Application

What we will be building

I feel the best way to learn is by doing. In this article to we will build a Todo app using URQL,
we will learn how to :

Setup URQL with React
Setting Fetch Options like “request headers”
Write queries
Write Mutation

What is URQL

URQL stands for Universal React Query Library. URQL is a GraphQL client that exposes a set of React components and hooks. It's built to be highly customizable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients. Please Note that we weill make use of Git , Redux , GraphQL, NodeJS and Reactstrap but we are going to concentrate fully on URQL.
You can get the finished project - URQL_TODO_APP

Prerequisite for the article

Basic Knowledge of React
Basic Graphql knowledge
NodeJS Installed on your PC
Knowledge of Redux will be a plus (as we will be using redux for state management)
Git & GitHub knowledge
Basic Knowledge of Redux

Getting started

Since we will be making use of the Fauna GraphQL API. Make sure you Sign up to Fauna and set up your GraphQL API. Fauna GraphQL api requires an authorization key which we will save as an Environment variable (for Security reason).

Step 1:
In the root level of your react application, create a file .env.local . In this file, add an entry for the generated key:

 REACT_APP_FAUNA_SECRET=fnAD7S71UlACBcBWehe5q06JQeDRNgJUiNTbvUoN

NOTE:

The file should be named .env.local and not just .env
Environment Variables that would be used in a react application should start with “REACT_APP_”… else they won’t be imported by default
make sure you also have a .gitignore file in your project’s root directory that contains .env.local so that your secrets won’t be added to your git repo and shared with others.
You’ll have to explicitly stop and restart your application with yarn start in order to see these changes take. ##

Step 2:
Install relevant packages:
Using Yarn

   $ yarn add urql graphql

Or Using npm

    $ npm install --save  urql graphql

Update the index.js file in the root level of the application to the code below

   import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import { createClient, Provider } from 'urql';
    // Create a Urql graphql client
    const client = createClient({
      url: 'https://graphql.fauna.com/graphql', /// the graqhql api url
      fetchOptions: { // fetch options  you which to add
        headers: { // request header
          // authorization token imported from .env.local
          authorization: `Bearer ${process.env.REACT_APP_FAUNA_SECRET}`, 
        },
      },
    });
    ReactDOM.render(
      <React.StrictMode>
        <Provider value={client}>
          <App />
        </Provider>
      </React.StrictMode>,
      document.getElementById('root')
    );

Code Explanation:

createClient - Create a GraphQL client to enable interaction with the GraphQL api
fetchOptions - This option allows us to customize the options that will be passed to fetch when a request is sent to the given API url
Provider - A Wrapper component that enables every other component inside it to make use of GraphQL queries that will be sent to our API
url - the GraphQL API url
headers - custom headers needed by the API , this might be needed for Authentication, Authorization, e.t.c.

If you have been following along so far, congratulations, you are ready to start writing queries and Mutations

CRUD (Create, Read, Update, Delete) Operations With URQL

After you setup URQL, the next step is to Create a todo task.

Create Task

    import { useMutation } from 'urql';
    /*At the top of your of your file */
    // ...code

    /* Inside a React component */
      const CreateTodo = /* GraphQL */ `
        mutation($data: TodoInput!) {
          createTodo(data: $data) {
            _id
            name
            completed
          }
        }
      `;
      const [result, createTodoItem] = useMutation(CreateTodo);


     function  onSumbit() {
      const newItem = {
          data: {
            name: name,
            completed: false,
          },
        };
        createTodoItem(newItem).then((result) => {
            const {
              data: { createTodo },
            } = result;
            props.addItem(createTodo); // passing data our redux store
          });
    }

Code Explanation:
For a better understanding of the code I suggest you go through the The Project Repo, Navigate to src/components/itemModal.js

CreateTodo - is a GraphQL mutation. You can use the GraphQL playground and Schema to structure your mutations and queries.
useMutation - is imported from urql and is used to execute GraphQL mutations. it return a tuple.
result - The first item in the tuple contains fetching, error, and data — it's identical since this is a common pattern of how urql presents operation results.
createTodoItem - The second Item in the tuple is a function where you pass graphQL variables. Notice in the GraphQL mutation we passed $data as a variable, and in the createTodoItem function we passed data as an argument in the function call.

Get All tasks (GET)

    import { useQuery } from 'urql';
    /*At the top of your of your file */
    // ...code

    /* Inside a React component */
     const [result] = useQuery({
        query: `
        {
          allTodos {
            data {
              _id
              name
              completed
            }
          }
        }
      `,
      });
      const { data, fetching , error} = result;

Code Explanation:
For a better understanding of the code I suggest you go through the The Project Repo, Navigate to src/components/TodoList.js

useQuery - Is used to make GraphQL query request. Similar to the useMutation hook, the useQuery hook returns a tuple but with only one Item, which is the result (response) of the query.
result - is the response data from a query request, it is an object with three properties,
- data
- fetching
- error
data - basically response data from the server
fetching - This is the state of the request, It is initially false, when a request is completed it updates to true.
error - This propertty contains the error message if any error occurs, it is initially undefined but updates to an error message from the server if an error occurs

Mark as Completed (Update)

    import { useMutation} from 'urql';
    /*At the top of your of your file */
    // ...code

    /* Inside a React component */
    const updateTodo = /* GraphQL */ `
      mutation UpdateTodo($id: ID!, $data: TodoInput!) {
        updateTodo(id: $id, data: $data) {
          _id
          name
          completed
        }
      }
    `;
    const [updateResult, updateTodoItem] = useMutation(updateTodo);
     const newItem = {
            id: props.id,
            data: {
              name,
              completed: props.completed,
            },
          };
      updateTodoItem(newItem).then((result) => {
      // result here is similar to  updateResult (first item returned by useMutation)
      const {
          data: { updateTodo },
        } = result;

      });

Code Explanation:
For a better understanding of the code I suggest you go through the The Project Repo, Navigate to src/components/updateItemModal.js.

UpdateTodo - is a GraphQL mutation. You can use the GraphQL playground and Schema to structure your mutations and queries.
useMutation - is imported from urql and is used to execute GraphQL mutations. it return a tuple.
result and updateResult - The first item in the tuple contains fetching, error, and data — it's identical since this is a common pattern of how urql presents operation results.
updateTodoItem - The second Item in the tuple is a function where you pass graphQL variables. Notice in the GraphQL mutation we passed $id and $data as variables, and in the updateTodoItem function we passed them as arguments in the function call.

Delete tasks (DELETE)

    import { useMutation} from 'urql';
    /*At the top of your of your file */
    // ...code


    /* Inside a React component */
    const deleteTodo = /* GraphQL */ `
      mutation DeleteTodo($id: ID!) {
        deleteTodo(id: $id) {
          _id
          name
        }
      }
    `;
      const [, deleteTask] = useMutation(deleteTodo);
       deleteTask(data).then((result) => {
            const {
              data: {
                deleteTodo: { _id: deletedDataId },
              },
            } = result;
          });

For a better understanding of the code I suggest you go through the The Project Repo, Navigate to src/components/DeleteButton.js.

deleteTodo - is a GraphQL mutation. You can use the GraphQL playground and Schema to structure your mutations and queries.
useMutation - is imported from urql and is used to execute GraphQL mutations. it return a tuple.
result - The first item in the tuple contains fetching, error, and data — it's identical since this is a common pattern of how urql presents operation results.
deleteTask - The second Item in the tuple is a function where you pass GraphQL variables. Notice in the GraphQL mutation we passed $id as a variable, and in the deleteTask function we passed them as arguments in the function call.

Conclusion

In this Article we learnt How to Setup URQL with React, create data, fetch data, update data and delete data. URQL is a really wonderful library to look into, You can checkout URQL documentation for more Information.

Creating an Inventory desktop Application with React, Apollo (Graphql), AntD, ElectronJS and, Fauna

Akuagwu Philemon — Wed, 31 Mar 2021 22:25:54 +0000

Authored in connection with the Write With Fauna program.

Introduction

This Article will be a walk-through on how to get started with ElectronJS and FaunaDB. We will also be going through some other libraries like ReactJS and AntD. To fully understand this walkthrough I suggest you practice along with and use The Completed project as a Guide.

Prerequisite

This Article is targeted at Beginners to ElectronJS and Fauna, a Reader you are expected to know the following

React JS
JavaScript
NodeJS
Graphql
Any design Library like Bootstrap / MaterialUI

What you will Learn

How to Setup an Electron application from Scratch
How to Use React and electron
How to connect Your electron application to a Fauna server using Apollo GraphQL client
How to perform basic Get, Create and Delete actions on Fauna

ElectronJS

ElectronJS is a Javascript framework that is used that allows the development of desktop GUI applications using web technologies. It utilizes the Chromium rendering engine and the Node.js runtime.

why ElectronJS

Cross-Platform Support: With ElectronJs you can create GUI desktop applications for multiple operating systems, for example, Windows 10 and macOS
Write Code once: The same codebase can be used to create both Desktop GUI application and Web applications
Compiling and Building: Electrons application can work without a specific runtime being installed, this simply means that you can install and run an electron application on a device without NODEJS ( JavaScript runtime Environment) being installed on it
Flexibility: ElectronJS can be used with most web technology Libraries, for Example ReactJS, VueJS, etc.

In this article, I will be making use of ReactJS to create an Inventory system

Fauna

Fauna is the data API for client-serverless applications. It provides a GraphQL interface and API that supports custom business logic and is integrated with the serverless ecosystem, enabling developers to build and ship faster. It provides a fast, consistent, reliable, and secure infrastructure.

Apollo Client

Apollo Client is a state management tool for JavaScript that enables you to make GraphQL requests and manage data remotely and locally
Use it to fetch, cache, and modify application data, all while automatically updating your UI. In this article, we will use React Apollo Client to interact with Fauna GraphQL API
Check Apollo Docs for more information

AntD

Ant-D short for Ant Design is a Design Library that provides High level reusable react components. They provide components such as

Icons
Layout components
Buttons
Table component
Modals
Toasts, etc

Check Ant Design Documentation for more information

Getting Started

Setup React application using “Create React App”
Run

$ npx create-react-app invetory

Setup Electron with react

Step 1:
To set up electron we are going to start by installing the Packages necessary for it by running

$ yarn add -D concurrently electron-builder electron wait-on electron-is-dev cross-env

concurrently - Run multiple commands concurrently. Like npm run watch-js; in this case, running the react server and electron server simultaneously
wait-on - a package that allows processes run asynchronously; in this case “awaits” the react server before starting the electron server.
electron- the electron framework that we will be utilizing

Step 2:
Configure the electron by following these steps :

Create a file named ‘electron.js’ in the public folder
In the electron.js file copy the following code and paste it

    const electron = require('electron'); // import electron package
    const app = electron.app; // assign the electron 'app' method to the app constant
    const BrowserWindow = electron.BrowserWindow;
    const path = require('path');
    const url = require('url');
    const isDev = require('electron-is-dev');
    let mainWindow;
    function createWindow() {
      mainWindow = new BrowserWindow({ width: 1020, height: 720 });
      mainWindow.setMenuBarVisibility(false); // display menu
      mainWindow.loadURL(
        isDev
          ? 'http://localhost:3000'
          : `file://${path.join(__dirname, '../build/index.html')}`
      );
      mainWindow.on('closed', () => (mainWindow = null));
    }
    app.on('ready', createWindow);
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });
    app.on('activate', () => {
      if (mainWindow === null) {
        createWindow();
      }
    });

Add the Start script to the package.json file

"electron-dev":"concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",

Create a /dist/builder-effective-config.yaml file

and populate the file with this configuration

    directories:
      output: dist
      buildResources: assets
    files:
      - filter:
          - build/**/*
          - build/**/*
          - node_modules/**/*
    extraMetadata:
      main: build/electron/main.js
    appId: com.example.electron-cra
    extends: react-cra
    electronVersion: 9.0.4

Direct the electron CLI to the ‘electron.js’ file by adding "main": "public/electron.js",

in the package.json file

Lastly, run

$ npm run electron-dev

If you followed all the steps correctly, you should have your app launched successfully, if you are having troubles, simply clone the React-Electron-Stater repo

Setup Electron with AntD

As stated earlier in this Article, AntD is the design library used in this project, and setting it with our Electron application is as easy as setting AntD up with react. Follow these steps to do so
step 1:
install the following dependencies

$ yarn add antd @ant-design/icons

Step2 :
In the src/index.js file, import AntD stylesheet by add “import 'antd/dist/antd.css';” to the top of the file I will not elaborate much on AntD since it is not the main focus of this Article. For more information visit AntD official doc

Setup Apollo

Apollo Client is a GraphQL client used for GraphQL mutations and queries. In this article, we will use it to interact with the Fauna GraphQL API. To set up Apollo with ElectronJS and ReactJS, you should follow the steps below
step 1:
Install the following dependencies

$ yarn add @apollo/client @apollo/react-hooks graphql

Make sure the access key to your Fauna Graphql API is saved in the .env.local file.

Checkout Migrating a react project from aws appsync to fauna to get started with Creating a Fauna GraphQL API
Note:
Make use of this GraphQL Schema

    type Inventory {
      product: String! # the name of the product
      count: String # count of the product
      id: String # special Id given to a product
    }
    type Query {
      allInventories: [Inventory!]
    }

In the .env.local file, add an entry for the generated key:
The REACT_APP_FAUNA_SECRET=***
NOTE:

The config file must be named .env.local and not just .env
React environment variable should start with “REACT_APP_”…
make sure that you also have a .gitignore file in your project’s root directory that contains .env.local so that your secrets won’t be added to your git repo and shared with others.
You have to restart the react application for changes to take place

Step 2:
Now in the src directory of your application, add a new file named client.js with the following content:

    import { ApolloClient, InMemoryCache } from "@apollo/client";

    export const client = new ApolloClient({

    uri: "https://graphql.fauna.com/graphql",

    headers: {

    authorization: `Bearer ${process.env.REACT_APP_FAUNA_SECRET}`,

    },

    cache: new InMemoryCache(),

    });

The code above simply configures Apollo to make requests to our Fauna database. The uri option specifies the base URI of the GraphQL API, the authorization header indicates that we’re connecting to the specific database instance for the provided key that we generated earlier.

Step 3:
After that, We will replace the code in the index.js with


    import React from 'react';

    import ReactDOM from 'react-dom';

    import { ApolloProvider } from '@apollo/client';

    import './index.css';

    import App from './App';

    import { client } from './client';

    ReactDOM.render(

    <React.StrictMode>

    <ApolloProvider  client={client}>
    <App />

    <ApolloProvider \>

    <React.StrictMode \>,

    document.getElementById('root')

    );

Get Inventory Items

Getting data from the Fauna GraphQL API is easy and it is done using the “useQuery” from apollo/react-hook.
To make a query to a GraphQL API follow these steps:

step 1:
import the following dependencies

import { useQuery, gql } from '@apollo/react-hooks';

useQuery - a react gook that is used to make GraphQL queries
gql - The gql template literal tag can be used to concisely write a GraphQL query that is parsed into a standard GraphQL AST.

step 2: Write the query

    const listInvetoryItems = /**GRAPHQL */ gql`
        query {
          allInventories {
            data {
              count
              product
              id
              _id
            }
          }
        }
      `;

Step 3:

     const { data: inventoryData, error, loading } = useQuery(listInvetoryItems);

Step 4:
Updating the React UI with the data retrieved from Fauna GraphQL query

    // From List.js line 64 
    useEffect(() => {
        if (
          inventoryData &&
          inventoryData.allInventories && // validation
          inventoryData.allInventories.data // validation
        ) {
          const newData = inventoryData.allInventories.data.map((data) => ({
            ...data,
            key: data._id, // required by antD Table to manage the state of a rows on a table
          }));// mapping response 
          setData(newData);
        }
        if (error && loading === false) {
          console.log('I think we have an error');
        }
      }, [inventoryData, error, loading]);

useEffect is the hook that manages the side-effects in functional components.
inventoryData is destructured alias of ‘data’ which is the response of the Fauna graphQL call

Add Inventory Item

To add Items to our inventory system we are going to make GraphQL mutations making use of the Apollo client useMutaion hook. To do so, follow the steps below

Step 1 :
import the following hooks at the top of the file

import { gql, useMutation } from '@apollo/react-hooks';

useMutation is an apollo/react-hooks function that is used to make graphQL Mutations

Step 2:
Write and structure the GraphQl mutation.

      const addInventoryMutation = /** GraphQL mutation */ gql`
        mutation CreateInventoryItem($data: InventoryInput!) {
          createInventory(data: $data) {
            count
            id
            product
            _id
          }
        }
      `;

addInventoryMutation - is a const that contains the GraphQL mutation. You can test and structure a mutation using the graphql playground

Step 3:
Call the useMutation hook, passing the graphQL mutation string and options

    const [createItem] = useMutation(addInventoryMutation, {
        onCompleted: (data) => {
          const { createInventory } = data; // destructure data
          setData((state) => {
            return [{ ...createInventory, key: createInventory._id }, ...state];
          });
        },
      });

useMutation - is imported from @apollo/react-hooks and is used to execute graphql mutations
createItem - useMutation hook returns an array of functions and objects, the first element of the array is a function used to make mutations. The arguments passed to the mutation is the variable of the graphql mutation

Step 4:

    // List.js line 88
     const onOk = ({ product, count, id }) => {
        createItem({ variables: { data: { product, count, id } } });
        setIsOpen(false);
      };

Explanation:
Please go through the code The Completed project as a Guide To fully understand this Step

onOk - is a call back function called when the form in the modal is submitted
createItem is the function (first element of the array) returned by the useMutation hook
setIsOpen - is a function used to toggle the form Modal display

Delete Inventory Items

To delete inventory Items follow the steps below
Step 1 :
import the following hooks at the top of the file

import { gql, useMutation } from '@apollo/react-hooks';

useMutation is an apollo/react-hooks function that is used to make graphQL Mutations

Step 2:
Write and structure the GraphQl mutation.

     const deleteInventoryMutation = /** GraphQL delete Mutation */ gql`
        mutation DeleteInventoryItem($id: ID!) {
          deleteInventory(id: $id) {
            count
            id
            product
            _id
          }
        }
      `;

deleteInventoryMutation- is a const that contains the graphql mutation. You can test and structure a mutation using the graphql playground

Step 3:
Call the useMutation hook, passing the graphQL mutation string and options

    const [deleteItem] = useMutation(deleteInventoryMutation, {
        onCompleted: (data) => {
          setData((state) => {
            return state.filter((x) => x.key !== data.deleteInventory._id);
          });
        },
      });

useMutation - is imported from @apollo/react-hooks and is used to execute graphql mutations
deleteItem - useMutation hook returns an array of functions and objects, the first element of the array is a function used to make mutations. The arguments passed to the mutation is the variable of the graphql mutation

Step 4:

    // List.js line 96
      const onDelete = () => {
        toDel.forEach((del) => {
          deleteItem({ variables: { id: del } });
        });
      };

Explanation:
Please go through the code The Completed project as a Guide To fully understand this Step

toDel - is an Array of all selected rows in a table

Conclusion

In this article, we learned how to set up Electron JS, Apollo, ReactJS, and Fauna, We also learned how to make mutations and queries using Apollo. After this walkthrough article, I am confident that you can start creating your desktop applications using ElectronJS, react, and Fauna. Contact me on Twitter for more information.

Migrating a React project from AWS Appsync to Fauna

Akuagwu Philemon — Sat, 05 Dec 2020 23:27:09 +0000

Introduction

In 2020, there is a variety of technology stack that can be utilized to create a website, and sometimes a developer may require to migrate an already existing project from one tech stack to another. In this article we are going to migrate an AWS Serverless (Appsync)

Graphql application to a Fauna Graphql Application.

The application we are Migrating

The application is a “todo application” that uses AWS DynamoDB as its Database and AWS Appsync service currently. We are going to convert the current application to a Fauna application.

Why Fauna

Fauna is a serverless database that provides you with CRUD capabilities and abstract a lot of “Under the hood” processes You might want to use Fauna because:

Fauna is fast and scales well
Fauna is relatively easy for beginners to get started with
The current project rely on two AWS services (Appsync and DynamoDB) but with Fauna it will rely on one
Fauna currently uses the Calvin protocol to maintain several full and consistent copies of the data, these data are called replicas, with the ability to both read and write on every node.
The learning curve for Fauna is relatively less than learning AWS appsync

Prerequisite for the Article

Basic Knowledge of React
Basic Graphql knowledge
Using Apollo with React
NodeJS Installed on your PC
Knowledge of Redux will be a plus (as we will be using redux for state management)
Git & GitHub knowledge

Getting Started

To Get Started and follow along do the following :

Clone the repo from GitHub by running the following command in your git bash terminal

 $ git clone https://github.com/PhilzAce1/FaunaDB-Todo-app.git

Git checkout to branch “ready-amplify”

$ git checkout ready-amplify

Install all dependencies required to make the application work

$ yarn install

Lastly for your application to work You will have to setup the Appsync service using Amplify or on the Amazon console

Overview of the Current application

The Current Application makes use of the “Aws-amplify” package as the GraphQL client, we are going to be making mutations and queries using the Aws Appsync package

Graphql Client setup

Schema

# Todo -> GraphQL type

type Todo {

name: String! #title of the task

completed: Boolean #task completed

}

# Graphql query type -> Specify Queries you want to make available

type Query {

allTodos: [Todo!] #return all Tasks created

# fetch tasks by the value of their "completed property

todosByCompletedFlag(completed: Boolean!): \[Todo!\]

}

Setting up Fauna

Setting up Fauna is very easy and I am going to walk you through from scratch :

Step 1: Go to the Fauna website Fauna

if you have an account, you can log in, if you do not have an account, simply create one

Creating an account is really easy and straightforward.

Step 2:

Create a new Database

Step 3:

Give the Database a name.

Step 4:

In this Step, I will compare an AWS Appsync Graphql Schema with a Fauna Schema

On the right-hand side we have the AWS Appsync schema, the “@model” directive will create a CRUD resolver for the “Todo” Graphql Type,

Similarly on the Left Fauna will automatically Create Resolvers based on the schema, you need not provide “directives”

Step 5:

Import the GraphQL schema that you created

After importing the Graphql schema, you will be routed to a Graphql playground where you can test and create queries and mutations. Click on the “Docs” tab in the sidebar to check out the available queries and mutations.

Provisioning a New Database Key

After you create and configure your database you need a way for client applications to access it.

The key generated will be used to specify and authenticate our Fauna database. It will also help us access the database to perform, create, read, update, and delete activities from the Client (React) application. Note that authentication and authorization are topics on their own .

The application key generated has a set of permissions that are grouped together in a “role”.

We begin by defining the role that has the necessary CRUD operations on tasks

Step 1:

Click on the “Security” tab and then the “New key” button

By default, there are two roles, “admin” and “server”. We could use these roles for our key, but it is not a good idea because they provide authorization for “Database level operations” such as creating a new collection or even deleting the database itself.
In that case, create a “Custom role”.

Then you click on the “New Custom role” button

Step 2:

Select permissions and then save

Step 3:

After you save the new Role. You will be able to access it when you want to create a new Key

Simply create a new Key.

This is the access key that will be used to authenticate your connection with the Fauna database you created.

For security reasons, we are going to load the Key from a “.env.local" file which is in the root level of your react application.

In this file, add an entry for the generated key:

REACT_APP_FAUNA_SECRET=**fnAD7S71UlACBcBWehe5q06JQeDRNgJUiNTbvUoN**

NOTE:

The name of the file should be .env.local and not just .env
Environment Variables that should be used by a react application should start with “REACT_APP_”…
make sure that you also have a .gitignore file in your project’s root directory that contains .env.local so that your secrets won’t be added to your git repo and shared with others.
You’ll have to explicitly stop and restart your application with yarn start in order to see these changes take place.

Connecting React to Fauna

With AWS Appsync we simply made use of the “aws-amplify” package to interact with the graphql api. But with Fauna we are going to be making use of Apollo client.

To install the relevant Apollo packages we’ll need, run:

yarn add @apollo/client graphql @apollo/react-hooks

Now in your src directory of your application, add a new file named client.js with the following content:

import { ApolloClient, InMemoryCache } from "@apollo/client";

export const client = new ApolloClient({

uri: "https://graphql.fauna.com/graphql",

headers: {

authorization: `Bearer ${process.env.REACT_APP_FAUNA_SECRET}`,

},

cache: new InMemoryCache(),

});

What the code is doing here is simply configuring Apollo to make requests to our Fauna database. Specifically, the uri makes the request to Fauna itself, then the authorization header indicates that we’re connecting to the specific database instance for the provided key that we generated earlier.

Note: The authorization header contains the key with the “CustomRole” role (the role we created earlier), and is currently hardcoded to use the same header regardless of which user is looking at our application. The tasks created by a user will not be specific to that user.

After that, We will replace the code in the index.js with

import React from 'react';

import ReactDOM from 'react-dom';

import { ApolloProvider } from '@apollo/client';

import './index.css';

import App from './App';

import { client } from './client';

ReactDOM.render(

<React.StrictMode>

<ApolloProvider  client={client}>
<App />

<ApolloProvider \>

<React.StrictMode \>,

document.getElementById('root')

);

Let’s compare the AWS Appsync configuration with the Apollo configuration in the index.js

On the left, you can see the configuration for the AWS Appsync and on the right, we have the configuration for Apollo.

You can test your app by running Yarn start if everything still works

Congratulations You are a rock star

Migrating CRUD operations

The next thing you have to do is to Migrate the CRUD operations. Since it is a Todo application, we are going to be creating tasks, marking them as completed, getting already created tasks and finally deleting them Using Fauna and React-Apollo client. We will Compare Appsync and Fauna Mutations and queries

Adding tasks to the Todo App

Explanation:

On the Left hand (Appsync) , Notice the structure of the mutation. The API and graphqlOperation functions are imported from aws-amplify package.

On the Right-hand (Apollo),

useMutation - is imported from @apollo/react-hooks and is used to execute graphql mutations
gql - is imported from “graphql-tag” package that we installed initially and it’s needed when making graphql api calls with Apollo
createItem - useMutation hook returns an array of functions and objects, the first element of the array is a function used to make mutations. The arguments passed to the mutation is the variable of the graphql mutation
loading - the second element of the array returned from the “useMutation” hook is an object. loading becomes “true” after the mutation has been executed successfully
createTodo - is a const that contains the graphql mutation. You can test and structure a mutation using the graphql playground

Getting all Tasks

Explanation :

The useQuery hook is similar to the useMutation hook. useQuery gook is used to make graphql query request. It returns an Object. “data” property contains the response data of the query, while the “loading” property is the status of the request’s completion

Deleting Tasks

Explanation:

The onComplete callback function is called when a mutation is resolved. deleteTask is a function used to perform a delete mutation. The arguments passed are the variables in the graphql mutation.

Marking task as Complete (Update)

Note:

updateTask function is similar to the previous mutations, but the first property of the variable object is the “id” property. The data property will contain all Fields in the database that you wish to update.

Conclusion

If you made it this far congratulation In this article we migrated an AWS Appsync application to a Fauna application by creating a new database, connecting the fauna database to our react application and then we compared the structure of queries and mutations in Appsync and Fauna. Fauna is a really cool innovation and it is something I will advise every developer to start using. You should also check out their official documentation for more information.

My Hacktoberfest Experience

Akuagwu Philemon — Sun, 01 Nov 2020 17:39:58 +0000

[Intro Heading]

Background

I am new to the DEV community, although I read DEV blogs, this is my first article here, I am Akuagwu Philemon, I am a full-stack developer. I am a passionate developer, with over 3 years of experience. I participated in Hacktoberfest 2019 and Hacktoberfest 2020 because I find it interesting and fun, dedicating a whole month to celebrate open-source and contributing to codes of company and individuals of a different nationality is really fun.

Progress

I have completed my hacktoberfest challenge and the process has been really interesting, I made 5 Prs to 3 repositories

Contributions

I contributed to 3 repositories but I am most proud of 1 which is

https://github.com/Presto412/CryptoFS, I enjoyed contributing to this repo because it was the most interesting, I was tasked to implement AWS S3 bucket as a cloud storage solution, In a way that we hash the file and simply link similar files, to avoid uploading similar files twice.

Reflections

I really enjoyed the whole Hacktoberfest experience, and I will surely do it again next year, I will also try to contribute to more open-source repos at my leisure