Learn

Create a sitemap.ts file in app directory Sample code for blogs:

import { BASE_URL } from "@/lib/constants";
import { getSortedPostsData } from "@/lib/posts";
import { generateBlogDetailPath } from "@/lib/urlHelper";
import { MetadataRoute } from "next";

export default async function sitemap(): MetadataRoute.Sitemap {
  const posts = getSortedPostsData();

  return posts.map((post) => ({
    url: `${BASE_URL}${generateBlogDetailPath(post.slug)}`,
    lastModified: post.date,
    
  }));
}

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps

In public folder. Reference: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

You can add favico, icon or apple-icon in app directory and it will be added to the html head automatically. https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

Make sure you have a list with - and then create brackets with space for unchecked and brackets with x for checked

- [ ]
- [x]

For it to be on the home page, from root layout file, do this:

export const metadata: Metadata = {
  other: {
    "google-site-verification": "ds-l9Fc",
  },
};

it is to be added inside the other key

There are many methods, we can add a google verification meta tag on the home page.

Add this in tailwind.config.ts

const config: Config = {
    darkMode: "class"
  }

For nextjs to generate blur url automatically, image should be statically imported like this. This way nextjs can automatically figure out the width and height of the image and can also automatically generate a blur image if you provide placeholder=blur value, default value = empty import myImage from './myImage.png;

  <Image
      priority
      src={myPic}
      alt="Gaurav Sobti pic"
      className="object-contain w-[40%] h-[auto]"
      placeholder="blur"
    />

Use PrismLight and register the languages you want to highlight.

  import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
  import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
  import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";

  SyntaxHighlighter.registerLanguage("jsx", jsx);
  SyntaxHighlighter.registerLanguage("tsx", tsx);

Just use non-null assertion operator: !

    // Compiled with --strictNullChecks
  function validateEntity(e?: Entity) {
    // Throw exception if e is null or invalid entity
  }
  function processEntity(e?: Entity) {
    validateEntity(e);
    let s = e!.name; // Assert that e is non-null and access name
  }

Allows to execute Typescript code with live-reload on file

Press ctrl + shift + p and then open user settings. Make sure that typescript.validate.enable is enabled.

• It creates schema.prisma file inside prisma folder which contains the start of a Prisma schema.
• It also creates a .env file and the environment variables defined are made available to Prisma

Use railway

Let's take an example of User with id field and messages models.

model User {
  id        Int       @id @default(autoincrement())
  messages  Message[]
}

model Message {
  id        Int      @id @default(autoincrement())
  userId    Int
  user      User     @relation(fields: [userId], references: [id])
}

Think of the Prisma Schema as the glue between the shape of your database and the API that interacts with it.

npx prisma migrate dev And if you want to name the migration: npx prisma migrate dev --name init

// seed.ts
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function main() {
  // Delete all `User` and `Message` records
  await prisma.message.deleteMany({});
  await prisma.user.deleteMany({});
  // (Re-)Create dummy `User` and `Message` records
  seedData.forEach(async (user) => {
    await prisma.user.create({ data: user });
  });
}

main().then(() => {
  console.log("Data seeded");
});

seed file is a normal js or ts file. So we can run it with node or typescript or ts-node-dev like this ts-node-dev prisma/seed.ts

1. Code first: Your application code defines and generates a GraphQL schema
2. SDL-first: You manually write the GraphQL schema

1. Int
2. Float
3. String
4. Boolean
5. ID

There are pre-made custom scalar type definitions available in the open source community: graphql-scalars They can be used like this:

import SchemaBuilder from "@pothos/core";
import { DateResolver } from "graphql-scalars";

export const builder = new SchemaBuilder<{
  Scalars: {
    Date: { Input: Date; Output: Date };
  };
}>({});

builder.addScalarType("Date", DateResolver);

By using Graphql Codegen

1. Prisma will generate types based off of your database schema
2. Pothos will use those types to expose GraphQL types via an API
3. GraphQL Codegen will read your GraphQL schema and generate types for your frontend codebase representing what is available via the API and how to interact with it.

• It's a collection of nodes and edges
• It's a representation of our app's data

It's a collection of object types that contain fields.

PascalCase

  type SpaceCat {
    # Fields go here
  }

"I'm a regular description"
type SpaceCat {

}

"""
I'm a block description
with a line break
"""
type SpaceCat {
  "I am description of the field"
  name: String!
}

It provides tag template literal, used for wrapping Graphql strings like schema definition. It converts GraphQL string into the format Apollo libraries expect. It also enables syntax highlighting.

ALL_CAPS

const TRACKS = gql`
  #Query goes here
`;

Yes Mutation is a type like Query, it serves as an entry to our schema.

  type Mutation {
    addSpaceCat(name: String!): SpaceCat
  }

Start with a verb that describes the specific action of our update operation: add, delete or create followed by whatever data the mutation acts on. Eg:

  deleteMission
  createMission

We should return all the updated objects because our client might need to use them to update the UI and then doesn't need to query another API. These should be the additional commond fields in a mutation response:

• code: an Int that refers to the status of the response, similar to an HTTP status code.

• success: a Boolean flag that indicates whether all the updates the mutation was responsible for succeeded.

• message: a String to display information about the result of the mutation on the client side. This is particularly useful if the mutation was only partially successful and a generic error message can't tell the whole story.

Create a separate mutation response type in multiple response case.

Because there might be an error in mutating the data and hence we need to return null.

incrementTrackViews: async (_, {id}, {dataSources}) => {
  try {
    const track = await dataSources.trackAPI.incrementTrackViews(id);
    return {
      code: 200,
      success: true,
      message: `Successfully incremented number of views for track ${id}`,
      track
    };
  } catch (err) {
    return {
      code: err.extensions.response.status,
      success: false,
      message: err.extensions.response.body,
      track: null
    };
  }
},

useMutation

It returns an array with 2 elements. First is the function which will actually be used to call the mutation , second contains the state of the mutation call: loading, error and data

const [incrementTrackViews, { loading, error, data }] = useMutation(
  INCREMENT_TRACK_VIEWS,
  {
    variables: { incrementTrackViewsId: id },
  }
);

When we add a new operation like a query or mutation. For example when we add a new mutation to update the authentication state.

Abstract Syntax Tree

Yes

[x] Retrieving the correct data from a source such as a database or a REST API [x] Populating its corresponding field with data [x] Constructing an AST from each incoming GraphQL query string

1. Where is our data stored, and how is it structured?
2. Is that structure different from our client app's needs and schema?
3. How can our resolver function access that data?

The resolver function can filter out the properties that are required

Yes

When we make 1 call to fetch top level data and subsequent N calls to retrieve child data which is same in every call.

It is a substitue for fetch in graphql. It helps in caching and deduplication of REST API calls out of the box.

To prevent malicious clients from accessing or manipulating data they shouldn't be, we recommend using the encodeURIComponent function for any HTTP path that accepts dynamic input.

getAuthor(authorId) {
  return this.get(`author/${encodeURIComponent(authorId)}`);
}

A resolver's name should correspond to its field name.

parent is the returned value of the resolver for the field's parent. This will be useful when dealing with resolver chains. args contains all GraphQL arguments that were provided for the field by the GraphQL operation. contextValue is an object shared across all resolvers that are executing for a particular operation. The resolver needs this argument to share state, like authentication information, a database connection, or a DataSource. info contains information about the operation's execution staet, including the field name, the path to the field from the root, and more. It's not used as frequently as the others, but it can be useful for more advanced actions like setting cache policies at the resolver level.You c

Where we have initialised apollo server and started the standalone apollo server. We can do something like this:

 const { url } = await startStandaloneServer(server, {
    context: async () => {
      return {
        dataSources: {
          trackAPI: new TrackAPI(),
        },
      };
    },
  });

1. errors key
2. data key

Yes

GRAPHQL_VALIDATION_FAILED

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

  const client = new ApolloClient({
    uri: 'http://localhost:4000',
    cache: new InMemoryCache(),
  });

  ReactDOM.render(
    <ApolloProvider client={client}>
      <GlobalStyles />
      <Pages />
    </ApolloProvider>,
    document.getElementById('root')
  );

The list's items can't be null

In the Query type

  type Query {
    "argument is mandatory and of type id and returns a SpaceCat object"
    spacecat(id: ID!): SpaceCat
    "accepts 2 arguments: to of nullable type String and scheduled of nullable type Boolean"
    missions(to: String, scheduled: Boolean): [Mission]
  }

A graphql query in many cases has nested fields. We can associate resolvers for every field. When we write resolvers for nested fields and take advantage of the data inside the parent which was returned through parent resolver, it is called resolver chaining.

  query track(id: ‘c_0') {
    title
    author {
      name
    }
  }

Here we can write a resolver for author and use the trackId from the parent to get that data.

  query getData($isPresent: String!){
    title
  }

  const { loading, error, data } = useQuery( MY_QUERY, { variables: { trackId }});