Notes on Next.js '"Frontend for BhagavadGita.io v2", gita-frontend-v2, open-source Github repo

Last updated 1 Jun 2024

Today I started going through '"Frontend for BhagavadGita.io v2", gita-frontend-v2, https://github.com/gita/gita-frontend-v2, MIT license, last modified: Mar 2024, live site: https://bhagavadgita.io/ .' from my post: https://raviswdev.blogspot.com/2024/05/bhagavad-gita-and-hindu-scripture.html.

https://bhagavadgita.io/acknowledgements lists the sources for the Bhagavad Gita text, translations and commentaries.

It has an API link that takes us to: https://rapidapi.com/bhagavad-gita-bhagavad-gita-default/api/bhagavad-gita3 which may be the REST API used by the app.

The verse page (e.g. https://bhagavadgita.io/chapter/5/verse/1): has customization links for appearance, source (of translation & commentary, I think), a play audio link and an Advanced View button which allows for change in the verse page content itself (turn on/off Devanagari, Verse text, translation etc.).

The app. does not seem to have a login page but that may not be necessary for this app.

The app. does not seem to have a user notes facility.

Search feature is provided but I don't know how effective it is.

Light and dark modes are supported.

English and Hindi languages are supported.

Links are shown for Android and Apple App (versions of it) at bottom right.

README.md has installation instructions. Tried to follow them.

For yarn installation: https://classic.yarnpkg.com/en/docs/install#windows-stable, on trying Install via npm the command, "npm install --global yarn" reported success but it finished too quickly. Later running 'yarn --version' gave an error (not recognized...). Then I tried the alternative of downloading Windows installable and installing it. I needed to add the path of bin directory of yarn installation to my PATH environment variable, restart VSCode and then 'yarn --version' succeeded giving output of 1.22.19.

'yarn install' was very slow. The above yarn install page has a notice: "Please whitelist your project folder and the Yarn cache directory (%LocalAppData%\Yarn) in your antivirus software, otherwise installing packages will be significantly slower as every single file will be scanned as it’s written to disk." Need to think about this. I did not have to do anything like that for npm.

After a looong time, it gave an error:

error An unexpected error occurred: "https://registry.yarnpkg.com/@iconify/icons-mdi/-/icons-mdi-1.1.47.tgz: ESOCKETTIMEDOUT".

info If you think this is a bug, please open a bug report with the information provided in "--snip--\\gita-frontend-v2\\yarn-error.log".

info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

-----------------

On cancelling, and rerunning, it ran very fast till 923/925 packages (so it seems to not redo the whole thing). Then it moved very slowly to 924/925.

In both these attempts at times, it gave the message: "info There appears to be trouble with your network connection. Retrying..."

But I think the network connection was OK.

Eventually it moved forward (so I think it got the 925 package as well).

Now it gave a warning of 'warning " > ts-node@10.9.1" has unmet peer dependency "@types/node@*".'

But it continued and after a little time, gave the message: 

success Saved lockfile.

Done in 416.23s.

---

Then the yarn program exited.

I presume it has installed the packages successfully.

Ran 'yarn dev'. It took a little time to get ready. I had to then go to http://localhost:3000/ which started compilation messages on console. Eventually I got these messages on console:

- warn 

metadata.metadataBase is not set for resolving social open graph or twitter images, using "http://localhost:4000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

- error node_modules\gqty\Error\index.mjs (26:31) @ Function.create

- error Error: NEXT_PUBLIC_GRAPHQL_ENDPOINT should be present

null

- error node_modules\gqty\Error\index.mjs (26:31) @ Function.create

- error Error: NEXT_PUBLIC_GRAPHQL_ENDPOINT should be present

digest: "2342653903"

null

- error node_modules\gqty\Error\index.mjs (26:31) @ Function.create

- error Error: NEXT_PUBLIC_GRAPHQL_ENDPOINT should be present

null

- error node_modules\gqty\Error\index.mjs (26:31) @ Function.create

- error Error: NEXT_PUBLIC_GRAPHQL_ENDPOINT should be present

digest: "2342653903"

null

- error node_modules\gqty\Error\index.mjs (26:31) @ Function.create

- error Error: NEXT_PUBLIC_GRAPHQL_ENDPOINT should be present

null

- error node_modules\gqty\Error\index.mjs (26:31) @ Function.create

- error Error: NEXT_PUBLIC_GRAPHQL_ENDPOINT should be present

digest: "2342653903"

null

--- 

The browser showed the message:

Unhandled Runtime Error

Error: NEXT_PUBLIC_GRAPHQL_ENDPOINT should be present

Call Stack

Function.create

node_modules\gqty\Error\index.mjs (26:31)

create

node_modules\gqty\Client\resolvers.mjs (315:32)

----

One of the warning messages above referred to http://localhost:4000. I thought I should try again after changing my default PORT to 3000. Used '$env:port=3000' Powershell command to do so.

Ran 'yarn dev' again.

Quickly got the message, " Ready on http://localhost:3000" on console.

Now I got similar error messages on console and browser as when my default port was 4000. So port being set to 3000 does not solve the issue.

https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables covers NEXT_PUBLIC_ environment variables.

package.json has the following as a dev dependency

 "@gqty/cli": "3.3.0", 

----

This seems to be: "The No-GraphQL client for TypeScript", https://gqty.dev/.

Looks like I need to set NEXT_PUBLIC_GRAPHQL_ENDPOINT environment variable and perhaps some other environment variables but they are not mentioned in the README.md installation instructions. Hmm. 

...

app/[[...locale]] - Optional Catch-all Segments, https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments . This [[...locale]] page seems to be start page of the app.

...

Going by some documentation, it appeared that Bhagavad Gita GraphQL API, https://github.com/gita/bhagavad-gita-graphql was used by this app. But on closer examination of the code, it does not seem to use it.

https://gql.bhagavadgita.io/graphiql - explorer for above.

It also uses: PostGraphile Instant GraphQL API, https://www.graphile.org/postgraphile/ ... "Instantly spin-up a GraphQL API server by pointing PostGraphile at your existing PostgreSQL database".

...

Now I think I need to get some exposure to GraphQL. Hmm.

...

Nice and easy-read article. I liked the SOAP coverage as I was exposed to that in early 2000s and it was good to read about how it got replaced by REST: Different Types of APIs – SOAP vs REST vs GraphQL, https://www.freecodecamp.org/news/rest-vs-graphql-apis/ , March 2023.

The GraphQL API Handbook – How to Build, Test, Consume and Document GraphQL APIs,  https://www.freecodecamp.org/news/building-consuming-and-documenting-a-graphql-api/ , May 2023.

...

In https://gql.bhagavadgita.io/graphiql :

query MyQuery {

  allGitaChapters {

nodes {

  id

    chapterNumber

    chapterSummary

    chapterSummaryHindi

    name

    nameTranslated

    versesCount

}

  }

}

----

returns all the data needed by getAllChapters arrow function (in src/lib/getAllChapters.ts)

But the arrow function code has:

    const gitaChapters = query.gita_chapters();

If .env has: NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://gql.bhagavadgita.io/graphql

then the above code seems to trip up and the error message shown on the console is:

Error: Cannot query field "gita_chapters" on type "Query". Did you mean "gitaChapter", "allGitaChapters", or "gitaChapterById"?

-----

Using VSCode 'Go To Definition' for gita_chapters initially said definition not found or something like that. Using VSCode 'Go To Type Definition' led to src/gqty-client/schema.generated.ts. But that did not help to find a solution to running the code successfully.

I think I need to get some exposure to gqty-client if I want to try to understand the code getting the Gita data.

Ran  'npx @gqty/cli https://gql.bhagavadgita.io/graphql' command in empty folder. That generated gqty folder with two files: index.ts and schema.generated.ts. But this schema.generated.ts does not have "gita_chapters" in it! Instead it has (types) like allGitaChapters and GitaChaptersEdge. So looks like the GraphQL endpoint used by the gita-frontend-v2 Github project is NOT https://gql.bhagavadgita.io/graphql.

...

'npm i @gqty/react' has to be run in Next app for useQuery() to work. Also component has to be made client component.

...

The gita-frontend-v2 project seems to use gqty/cli and functions like resolved() in it. The documentation of gqty is not great nor does the Internet have much material on it. Further, resolved() seems to be part of a legacy version and I could not get documentation pages for it. So it seems the gita-frontend-v2 project code is using a legacy version of gqty for which documentation is not currently easily available. If true, that's quite unsettling.

...

I decided to try out Apollo client. Getting Started With Apollo Client in Next.js, https://www.apollographql.com/blog/next-js-getting-started , March 2021 was useful though it needs Pages router. I modified it somewhat to work with App router and it worked with the GraphQL API endpoint it provided/specified. This was almost a breeze as compared to the hard time I had trying to get gqty to work. [On my PC, project name is: test1-countries.]

Note that after create-next-app creates project, you have to run:

npm install @apollo/client graphql

Additional article which I did not go in depth as I wanted a Nextjs and Apollo Client article which I got and is mentioned above: How to Fetch Data in React from a GraphQL API, https://www.freecodecamp.org/news/5-ways-to-fetch-data-react-graphql/ , May 2021

...

Next I tried out using Apollo Client with BG (Bhagavad Gita) GraphQL.

https://gql.bhagavadgita.io/graphiql has a Documentation Explorer collapsible pane on the right where you can search for schema.

With small amount of drilling down I could get from allGitaChapters to GitaChapter schema which gave the type info. for all the fields in the chapters reurned by allGitaChapters.

The key fields of GitaChapter (omitting a method) are:

nodeId: ID!

A globally unique identifier. Can be used in various places throughout the system to identify this single value.

id: Int!

name: String

slug: String

nameTransliterated: String

nameTranslated: String

versesCount: Int

chapterNumber: Int

nameMeaning: String

chapterSummary: String

chapterSummaryHindi: String

--------

So I could easily provide the type info. for chapter in my nextjs code:

chapter: {

          id: number;

          chapterNumber: number;

          name: string;

          nameTranslated: string;

          chapterSummary: string;

          chapterSummaryHindi: string;

          versesCount: number;

        }

----

It was very easy to write this small test/starter Next.js app displaying BG chapter summaries in English and Hindi without any styling, using the public BG GraphQL endpoint and Apollo client. This starter/test app. is deployed on Vercel: https://gitachapsumm.vercel.app/ and this is the Github repo for it. One small variation this test app. has from https://bhagavadgita.io/ (main app of gita-frontend-v2 project), is that this test app shows English and Hindi summary one below the other, whereas the main app shows either English or Hindi summary. It is a minor difference but it goes to show how the public BG GraphQL (backend) facility along with Nextjs+Apollo client makes it so easy for somebody with some knowledge of React and Next.js programming, to write such a simple app. having only one page. Note that this page, as per my understanding of Next.js, will be having the feature of static site generation/rendering (page generated at build time) as I have used the default server components, leading to fast loading of the page.

...

Readers may want to see my post: There seems to be very limited Telugu Bhagavad Gita open source APIs and web apps; Added BG Telugu summaries to starter/test app, https://raviswdev.blogspot.com/2024/05/there-seems-to-be-very-limited-telugu.html .

...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Imperative vs. functional programming, https://en.wikipedia.org/wiki/Functional_programming gives an example with reduce used in the functional programming part of the example.

...

The code of this app is complex, as expected as it has lots of features. I think I should suspend my study of this app. for now and move on to exploring simpler BG apps which I am able to run on my local PC.

...

The app seems to be using some Popover component.

Searching on net led to: https://nextui.org/ and its Popover component - https://nextui.org/docs/components/popover . This site seems to have a fascinating set of components which seem to be free to use (and are meant for React and Tailwind projects including Next.js, from my very quick first impression).

But the app is using https://headlessui.com/v1/react/popover (@headlessui/react).

From its src/Components/Headers/IndexHeader.tsx:

import { Disclosure, Popover, Transition } from "@headlessui/react";

----

Hmm. Seems to be another free set of UI components. Seems to need Tailwind CSS.