Mohit Posts - Answer Overflow

Mohit

Explore posts from servers

NNuxt TTCTheo's Typesafe Cult

Posts Comments

TTCTheo's Typesafe Cult

•Created by Mohit on 11/15/2024 in #questions

Can I use server actions in nextjs 15 for graphql request

if anyone can tell how to fetch graphql data on server side

2 replies

TTCTheo's Typesafe Cult

•Created by Mohit on 10/25/2024 in #questions

Facing issue when adding graphql to nextjs

This is my root layout file but when I use this I am getting runtime error

import localFont from "next/font/local";
import "./globals.css";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

// apollo client
const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_STRAPI_GRAPHQL_URL,
  cache: new InMemoryCache(),
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ApolloProvider client={client}>{children}</ApolloProvider>
      </body>
    </html>
  );
}

import localFont from "next/font/local";
import "./globals.css";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

// apollo client
const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_STRAPI_GRAPHQL_URL,
  cache: new InMemoryCache(),
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ApolloProvider client={client}>{children}</ApolloProvider>
      </body>
    </html>
  );
}

Unhandled Runtime Error
Error: React functionality 'useContext' is not available in this environment.

Unhandled Runtime Error
Error: React functionality 'useContext' is not available in this environment.

3 replies

NNuxt

•Created by Mohit on 4/10/2024 in #❓・help

Sitemap.xml

in my development environment my sitemap.xml shows 139 urls but in my production environment it shows only 29 urls can anyone tell me why?

17 replies

TTCTheo's Typesafe Cult

•Created by Mohit on 4/8/2024 in #questions

Help with dynamic image in Nuxt!

does anyone know to import dynamic assets because

<img 
:src="`/_nuxt/assets/images/${item.image}`"
:alt="`card_${index + 1}`"
class="w-100 card_height"
/>

<img 
:src="`/_nuxt/assets/images/${item.image}`"
:alt="`card_${index + 1}`"
class="w-100 card_height"
/>

the above code works but in production build it is not loading images but showing in dev environment but why does the below code doesn't work

<img 
:src="`@/assets/images/${item.image}`"
:alt="`card_${index + 1}`"
class="w-100 card_height"
/>

<img 
:src="`@/assets/images/${item.image}`"
:alt="`card_${index + 1}`"
class="w-100 card_height"
/>

2 replies

NNuxt

•Created by Mohit on 4/8/2024 in #❓・help

Help with dynamic image!!!

does anyone know to import dynamic assets because

<img 
:src="`/_nuxt/assets/images/${item.image}`"
:alt="`card_${index + 1}`"
class="w-100 card_height"
/>

<img 
:src="`/_nuxt/assets/images/${item.image}`"
:alt="`card_${index + 1}`"
class="w-100 card_height"
/>

the above code works but in production build it is not loading images but showing in dev environment but why does the below code doesn't work

<img 
:src="`@/assets/images/${item.image}`"
:alt="`card_${index + 1}`"
class="w-100 card_height"
/>

<img 
:src="`@/assets/images/${item.image}`"
:alt="`card_${index + 1}`"
class="w-100 card_height"
/>

1 replies

NNuxt

•Created by Mohit on 3/22/2024 in #❓・help

Dynamic heading not showing in view src but visible in inscpect element

This is how I declaring my useHead

const head = computed(() => {
  const perspectiveData = perspectiveDataG.value;
  const title = perspectiveData?.meta?._seopress_titles_title || '';
  const description = perspectiveData?.meta?._seopress_titles_desc || '';
  const imageUrl = perspectiveData?.featured_image_src || '';

  return {
    title,
    meta: [
      { hid: 'description', name: 'description', content: description },
      { hid: 'og:title', property: 'og:title', content: title },
      { hid: 'og:description', property: 'og:description', content: description },
      { hid: 'og:type', property: 'og:type', content: 'website' },
      { hid: 'og:image', property: 'og:image', content: imageUrl },
      {
        hid: 'og:url',
        property: 'og:url',
        content: `https://${config.public.DOMAIN}/blogs/${route.name}`,
      },
      { name: 'twitter:card', content: 'summary_large_image' },
      { hid: 'twitter:title', name: 'twitter:title', content: title },
      { hid: 'twitter:description', name: 'twitter:description', content: description },
      { hid: 'twitter:domain', property: 'twitter:domain', content: config.public.DOMAIN },
      {
        hid: 'twitter:url',
        property: 'twitter:url',
        content: `https://${config.public.DOMAIN}/${route.name}`,
      },
      { hid: 'twitter:image', name: 'twitter:image', content: imageUrl },
    ],
  };
});

useHead(() => head.value);

const head = computed(() => {
  const perspectiveData = perspectiveDataG.value;
  const title = perspectiveData?.meta?._seopress_titles_title || '';
  const description = perspectiveData?.meta?._seopress_titles_desc || '';
  const imageUrl = perspectiveData?.featured_image_src || '';

  return {
    title,
    meta: [
      { hid: 'description', name: 'description', content: description },
      { hid: 'og:title', property: 'og:title', content: title },
      { hid: 'og:description', property: 'og:description', content: description },
      { hid: 'og:type', property: 'og:type', content: 'website' },
      { hid: 'og:image', property: 'og:image', content: imageUrl },
      {
        hid: 'og:url',
        property: 'og:url',
        content: `https://${config.public.DOMAIN}/blogs/${route.name}`,
      },
      { name: 'twitter:card', content: 'summary_large_image' },
      { hid: 'twitter:title', name: 'twitter:title', content: title },
      { hid: 'twitter:description', name: 'twitter:description', content: description },
      { hid: 'twitter:domain', property: 'twitter:domain', content: config.public.DOMAIN },
      {
        hid: 'twitter:url',
        property: 'twitter:url',
        content: `https://${config.public.DOMAIN}/${route.name}`,
      },
      { hid: 'twitter:image', name: 'twitter:image', content: imageUrl },
    ],
  };
});

useHead(() => head.value);

now problem is that when inside my view src (CTRL + u) I don't see my title but on my tab it's visible

1 replies

TTCTheo's Typesafe Cult

•Created by Mohit on 2/21/2024 in #questions

Google authentication in Nuxt 2

How do I use Google auth in Nuxt 2 where I am using Vuex for state management #questions

2 replies

Gaming

Programming