DEV Community: Aashutosh Poudel

Understanding pointers in Go

Aashutosh Poudel — Tue, 30 May 2023 19:29:53 +0000

We define a variable with a value and a name. The variable name will be converted to a memory address and the value gets stored in that address. In case of a pointer variable, an actual memory address of another variable is stored as a value.

The two unary pointer operators.

& is used to get the memory address of a variable
* is used to get value at the address stored by a pointer variable.

Example:

func main() {
    x := 7
    y := &x // creating a pointer variable

    p := fmt.Println
    pf := fmt.Printf

    pf("type of x (non pointer variable) = %T\n", x)
    p("value of x (stores actual data) =", x)
    p("address of x (memory address where x is located) =", &x)
    // invalid operation: cannot indirect x (variable of type int)
    // p("value dereferenced by x =", *x)

    p()
    pf("type of y (pointer variable) = %T\n", y)
    p("value of y (stores memory address of x) =", y)
    p("address of y (memory address where y is located) =", &y)
    p("value at the address stored by y (dereferencing the pointer) =", *y)
}

Output

type of x (non pointer variable) = int
value of x (stores actual data) = 7
address of x (memory address where x is located) = 0xc00001a0e8

type of y (pointer variable) = *int
value of y (stores memory address of x) = 0xc00001a0e8
address of y (memory address where y is located) = 0xc000012028
value at the address stored by y (dereferencing the pointer) = 7

Resources:

Test upstream PR changes locally [Github]

Aashutosh Poudel — Wed, 15 Feb 2023 19:44:52 +0000

Steps to bring the changes made in a pull request into your local machine:

Find the id of pull request you want to test (say it is #2361) as well as the name of source branch in the pull request (say it is renovate/prisma-monorepo)

When working on a fork of a upstream repo, git remote -v may look like this:

origin  git@github.com:atosh502/chapter.git (fetch)
origin  git@github.com:atosh502/chapter.git (push)
upstream        https://github.com/freeCodeCamp/chapter.git (fetch)
upstream        https://github.com/freeCodeCamp/chapter.git (push)

The PR is likely made against a branch(destination: main) in the upstream repo. In order to get the branch(source: renovate/prisma-monorepo) containing the changes for PR to the local repo use the following:
```
# git fetch origin pull/<ID>/head:<BRANCH_NAME>
git fetch upstream pull/2361/head:renovate/prisma-monorepo
```

After this the upstream branch from PR will be available as a local branch and we can test the changes.

Resources

Easy to follow and simpler
- How to Checkout Git Pull Request
- Checking out pull requests locally
Hard to follow and complex

Using Postman and Postman Interceptor to authenticate a session cookie based GraphQL API

Aashutosh Poudel — Thu, 09 Feb 2023 18:28:25 +0000

Context

I once had to authenticate requests made from Apollo Studio to my local development server. The locally running GraphQL API was using session cookies for authentication. While there were workarounds and configs in order to set cookies correctly for requests sent from Apollo Studio, I wasn't able to reliably make it work. Also, I didn't want to change the cookie configs in my server as it would mess with my frontend setup.

Solution

I used Postman Interceptor to intercept cookies from the frontend. So every time a user logged in, Postman Interceptor would capture the appropriate cookies and store it. Now on every graphql requests made via Postman the stored cookies would be sent and user would get access to protected resource.

Steps:

Install and connect Postman to the local graphql server.
- Follow the steps from this section: Sending GraphQL queries in the request body and use your local server url: http://localhost:5000/graphql as URL endpoint.
Install Postman Interceptor for Chrome
- Go through the section Syncing cookies with Postman Interceptor and add localhost as the domain.
Next login to the frontend(in Chrome) as a privileged user (eg. at http://localhost:3000). The cookies set in the browser will be captured by Postman.

Next goto Postman and run a privileged query (which should not be available to unauthenticated/public users). The data is returned in the body and the relevant cookies are sent along with the request.

The cookies will be automatically removed/updated once we logout or login as a different user.

References:

Setting up cookies in Apollo Studio
Setting up Postman
- Querying with GraphQL
- Capturing and syncing cookies

Eagerly know if end of paginated results is reached in Prisma

Aashutosh Poudel — Sat, 28 Jan 2023 17:17:37 +0000

Context

Prisma doesn't return meta information like total_page or no_of_pages when returning paginated results. With information like total_page we can know beforehand if we are at the end of the page and show/hide relevant information. In prisma, this doesn't seem to be possible at the moment without adding a second query to fetch the count of results.

Problem

There's a Fetch More button at the bottom of a list. We need to enable this button only if we have more records to show. If not, we should hide this button.

Solution

This demo implementation doesn't use a second query. While fetching each page it retrieves one more record than the required page size. With this approach, the maximum number of records fetched twice is equal to the number of page requests. A more detailed explanation is attached below.

GitHub, Stackblitz

Using class-validator with Next.js and react-hook-form

Aashutosh Poudel — Thu, 26 Jan 2023 20:06:23 +0000

Let's use class-validator as a validation library with react-hook-form. I found using class-validator with Next.js a bit tricky as it uses decorators for validations and setting it up is a bit involved and took me quite some time to make it work. Link to Stackblitz

Steps:

Create your form with react-hook-form More info

<form>
    <input {...register('firstName')} />
    {errors.firstName && <div>{errors.firstName.message}</div>}

    <input {...register('lastName')} />
    {errors.lastName && <div>{errors.lastName.message}</div>}

    <input type="number" {...register('age')} />
    {errors.age && <div>{errors.age.message}</div>}

    <input type="submit" value="Submit" />
</form>

Install class-validator, @hookform/resolvers and class-transformer packages. Define class for your form fields, register your resolver with the form More info

npm i class-transformer @hookform/resolvers class-validator

class User {
  @MaxLength(20)
  @IsNotEmpty()
  firstName: string;

  @IsNotEmpty()
  lastName: string;

  @IsNumber()
  age: number;
}

const resolver = classValidatorResolver(User);

const formMethods = useForm<User>({ resolver });

Add following properties under compilerOptions in tsconfig.json

"strictPropertyInitialization": false,
"experimentalDecorators": true

Install the following packages More info

npm install --save-dev @babel/core babel-plugin-transform-typescript-metadata @babel/plugin-proposal-decorators babel-plugin-parameter-decorator

Update the list of plugins in .babelrc as follows:

{
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "babel-plugin-parameter-decorator",
    // ... other plugins
  ]
}

Additionally, if there's this error: TypeError: Reflect.metadata is not a function, install reflect-metadata with npm i reflect-metadata and import it at your app root.

More info here and here

Set default values in react-hook-form

Aashutosh Poudel — Fri, 13 Jan 2023 13:17:24 +0000

Data is fetched from an api or some async operation, and reset is used to set the default values for the form.

  const { reset } = useForm();

  useEffect(() => {
    // you can do async server request and fill up form
    setTimeout(() => {
      reset({
        firstName: "bill",
        lastName: "luo"
      });
    }, 2000);
  }, [reset]);

Or if we need to partially update the form, we can pass a function to the reset function like so.

<button 
  onClick={() => {
    reset(formValues => ({
      ...formValues,
      lastName: 'test',
    }))
  }}
>
  Reset partial
</button>

Alternatively, we can use setValue to set a few form fields

const { register, setValue } = useForm();

return (
  <form>
    <input {...register("firstName")} />
    <button type="button" onClick={()=> setValue("firstName", "Bill")}>
      setValue
    </button>
  </form>
)

Resources and code snippets taken from:

Exporting to excel with mui datagrid

Aashutosh Poudel — Thu, 12 Jan 2023 17:09:46 +0000

Community version of mui doesn't support excel export. This example shows adding excel export to mui datagrid using SheetJS.

TL;DR: https://stackblitz.com/edit/react-ts-3kav3v?file=App.tsx

Steps

Replace the default toolbar in datagrid with a custom implementation

export default function App() {
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <DataGrid
        columns={data.columns}
        rows={data.rows}
        components={{
          Toolbar: CustomToolbar,
        }}
      />
    </div>
  );
}

For now we remove everything from the default toolbar and only include our custom button that exports to excel

function CustomToolbar(props) {
  return (
    <GridToolbarContainer {...props}>
      <ExportButton />
    </GridToolbarContainer>
  );
}

ExportButton simply wraps a MenuItem in a container

export function ExportButton(props) {
  return (
    <GridToolbarExportContainer {...props}>
      <ExportMenuItem />
    </GridToolbarExportContainer>
  );
}

ExportMenuItem when clicked downloads the data present in the datagrid. It uses the useGridApiContext() to access the data.

export function ExportMenuItem(props) {
  const apiRef = useGridApiContext();
  const { hideMenu } = props;

  return (
    <MenuItem
      onClick={() => {
        handleExport(apiRef);
        // Hide the export menu after the export
        hideMenu?.();
      }}
    >
      Download Excel
    </MenuItem>
  );
}

handleExport does some basic data mappings, creates a worksheet, appends the worksheet to a workbook, adds column names and finally makes the file available for download.

function handleExport(apiRef) {
  const data = getExcelData(apiRef);

  const rows = data.map((row) => {
    const mRow = {};
    for (const key of config.keys) {
      mRow[key] = row[key];
    }
    return mRow;
  });

  const worksheet = XLSX.utils.json_to_sheet(rows);
  XLSX.utils.sheet_add_aoa(worksheet, [[...config.columnNames]], {
    origin: 'A1',
  });

  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, config.sheetName);
  XLSX.writeFile(workbook, config.fileName, { compression: true });
}

getExcelData uses the reference to datagrid and combines the rows and columns to get data from the datagrid

function getExcelData(apiRef) {
  // Select rows and columns
  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
  const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);

  // Format the data. Here we only keep the value
  const data = filteredSortedRowIds.map((id) => {
    const row = {};
    visibleColumnsField.forEach((field) => {
      row[field] = apiRef.current.getCellParams(id, field).value;
    });
    return row;
  });

  return data;
}

Resources:

Using nvm with fish shell [Linux]

Aashutosh Poudel — Tue, 10 Jan 2023 17:34:00 +0000

Steps

Install nvm
nvm won't work with fish
Install bass and fish-nvm

omf install https://github.com/fabioantunes/fish-nvm
omf install https://github.com/edc/bass

See this for other install options.

Install the desired node version and set it as default

nvm install 18.12.1
nvm alias default 18.12.1

Links:

Resources for learning about and debugging issues with delayed/undelivered push notifications sent via FCM/Firebase

Aashutosh Poudel — Fri, 25 Nov 2022 15:47:32 +0000

Background:

Tools, metrics and reports:

Cleanup large binary logs in MySQL

Aashutosh Poudel — Thu, 24 Nov 2022 19:32:49 +0000

I had an issue where my drive was almost occupied by mysql log files (almost 400G). I am not sure about the cause of the issue but I needed a way to remove those files fast. This was in my local dev machine so I decided to remove those files completely.

Here's a few commands to help you purge those files.

To purge logs created until a specific date:
mysql> PURGE BINARY LOGS BEFORE '2022-11-25 00:00:00';

To expire logs after certain time:
mysql> SET GLOBAL binlog_expire_logs_seconds=86400;

Additionally, set binlog_expire_logs_seconds in a config file to persist it between service restarts.

References:

Fix "Could not find maven()" error in expo

Aashutosh Poudel — Thu, 24 Nov 2022 19:16:19 +0000

I didn't have any issues building a development version of the app using expo. While running npx expo run:android I encountered an issue that something like this: "Could not find maven() for arguments ....".

The issue seems to be related to @rnmapbox/maps.
To resolve the issue make sure to add the following maven configs inside repositories in android/build.gradle.

repositories {

        maven {
            url 'https://maven.google.com/'
        }

        maven {
          url 'https://api.mapbox.com/downloads/v2/releases/maven'
          authentication { basic(BasicAuthentication) }
          credentials {
            username = 'mapbox'
            password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
          }
        }
}

Versions:
Managed, config plugins + expo-dev-client

{
  // ...
  "expo": "~47.0.8",
  "react-native": "0.70.5",
  // ...
}

References:

Docker tips: Find IP of postgres database & View logs from a running container

Aashutosh Poudel — Fri, 11 Nov 2022 11:15:11 +0000

1. Find IP of a PostgreSQL database running as a docker container

Run docker inspect <name-of-container>.

"NetworkSettings": {
            ...
            "Networks": {
                "name_of_your_database": {
                    ...,
                    "IPAddress": "172.18.0.2",
                    ...
                },
                ...
            }
        }
    }

Next you can use the IPAddress from above to connect to your database using pgadmin.

Reference

2. View logs from a running docker container

In order to tail logs from inside a docker container.

Run docker logs --follow <name-of-your-container>

Reference