Unable to retrieve various parameters of getStaticPaths through getStaticProps in Next.js with Apollo and GraphQL

Review the code below to help me troubleshoot an issue I am encountering. I am utilizing Id to identify single content and titles for links.

When I console log params.title:

console: android-paging-advanced-codelab

However,

when I attempt to console log params.id:

console: undefined

I require access to both params within getStaticProps in order to retrieve the necessary data.

I tried using context by passing context and utilizing context.params.id, but encountered the same outcome.

Please take a look at the code provided below and offer your assistance!

Here is the code snippet for my getStaticPaths :

export async function getStaticPaths(){

  const { data } = await client.query({
    query: gql`
    query {
      postContents{
        data{
          attributes{
              post_card{
                data{
                  id
                  attributes{
                    TitleForLink
                  }
                }
              }
          }
        }
      }
    }
    `
  })
  
  const paths = data.postContents.data.map((item)=> {
    return {
      params: { 
        id: item.attributes.post_card.data.id.toString(), 
        title: item.attributes.post_card.data.attributes.TitleForLink.toString(), 
      }
    }
  })

  return {
    paths,
    fallback: false,
  }

}

And here is the code for my getStaticProps:

export async function getStaticProps({params}){
 
  const { data } = await client.query({
    query: gql`
    query {
      postCards{
        data{
          id
          attributes{
            post_content{
              data{
                id
                attributes{
                  Title
                  Description
                }
              }
            }
          }
        }
      }
    }
    `
  })
  console.log(params.id)
  return {
    props: {
      content: data.postCards.data,
    }
  }
}

Answer №1

In order to pre-render specific paths, the getStaticPaths method must return an object containing the necessary parameters. This allows for customization by including additional properties such as locale for i18 configuration.

Subsequently, it is essential to perform another fetching process within the getStaticProps function to complete the setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you define a variable within the .config service in Angular JS?

Here is the code snippet I have been working on: spa.factory("linkFactory", function() { var linkFactoryObject = {}; linkFactoryObject.currentLink = "home"; return linkFactoryObject; }); This piece of code essentially serves as a global varia ...

Next.js API routes and central middleware causing CORS problems

While working on my web application using Next.js, I've run into some challenges related to CORS (Cross-Origin Resource Sharing) when trying to access my API routes. Even after implementing a central middleware to manage CORS headers, I'm still e ...

Initiate and terminate server using supertest

I've developed a server class that looks like this: import express, { Request, Response } from 'express'; export default class Server { server: any; exp: any; constructor() { this.exp = express(); this.exp.get('/' ...

Incorporate a gltf-model into your a-frame environment using the power of three.js

Is there a way to import a gltf-model into an a-frame scene using the three.js loader directly with javascript, instead of using a-frame tags? Additionally, I need the model to include animation and be able to control this animation through three.js. You ...

Utilizing Next.js to create a dynamic static web page

Encountered an error - React.Children.only expected to receive a single React element child. Despite trying multiple solutions provided for similar questions, I have been unable to find a resolution. The issue seems to be related to the Navbar of the webs ...

Injecting Custom HTML Tag through JavaScript on Page Load in Google Tag Manager

When attempting to inject events into the data layer upon loading DOM pages on my website, I encountered an issue. Since I lack access to the website code and developers are reluctant to make additions, I decided to implement this through a custom HTML tag ...

Having trouble getting the npm package with @emotion/react and vite to function properly

Encountering an issue with the npm package dependencies after publishing, specifically with @emotion/react. This problem arose while using vite for packaging. Upon installing the package in another project, the css property appears as css="[object Ob ...

What is the method to escape from a for loop in Protractor?

Check out my code snippet: formElements[0].findElements(by.repeater(repeater)).then(function(items){ console.log(i, '>>>>>>>>>.No of items in the list --- '+items.length); (function(items){ ...

What is the best way to explore JavaScript text using Firebug?

The search function (magnifying glass) located at the top-right hand corner of Firebug does not have the capability to search within JavaScript blocks. For instance, if I have the following code snippet: <script type="text/javascript"> var fooBa ...

Find the specific element that is visible within a customized viewport, such as a div or ul

Exploring the capabilities of the Viewport Selectors for jQuery plugin, here is a snippet of its source code: (function($) { $.belowthefold = function(element, settings) { var fold = $(window).height() + $(window).scrollTop(); return fold <= $ ...

Enhance Your NextJs Website with Interactive Tooltips using @tippyjs/react

<Link href="/company/add" > <a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a> </Link> Trying to integrate a Tippy tooltip component with a Nextjs Link do ...

Angular 14 presents an issue where the injectable 'PlatformLocation' requires compilation with the JIT compiler; however, the '@angular/compiler' module is currently missing

I've encountered the following error and have tried multiple solutions, but none of them have been successful: Error: The injectable 'PlatformLocation' requires JIT compilation with '@angular/compiler', which is not available. ...

Automatically switch to the designated tab depending on the URL

Is it possible to automatically activate a specific tab based on the URL structure if my tabs are configured in this way? I am looking for a solution where a link on www.example1.com/notabs.html will redirect to www.example2.com/tabs.html This particular ...

Is there a way to display sorting icons consistently and in a blue color for the currently selected sorting column in a React material-table component?

I recently used the material-table library to create a material table, but I am having trouble displaying the sorting icon continuously for all columns. In addition, I would like the color of the column that is currently sorted to be blue. If you want to ...

What steps are necessary to integrate Ant Design with Next.js for server-side rendering?

I have been exploring ways to incorporate Ant Design components into my next.js application. It's turning out to be quite a challenge because many of the Ant Design components cannot be used in server-side rendering due to their dependencies. Even bas ...

Issue concerning the oj-button element in Oracle JET framework

What causes the oj-button to continually concatenate its label text when clicked repeatedly? For an example of this behavior, refer to the button in the following cookbook: Is it normal for the label text to keep multiplying with each click, resulting in ...

Looking to alter the CSS of an ID element when hovering over a link on your website?

Irrespective of the positioning of the links in the html, a simple hover effect can trigger changes like switching images or altering backgrounds anywhere on the website. The ideal solution would involve a straightforward method without the need for Javas ...

What will happen if I have multiple nested SWRConfig components with different options selected?

I am currently utilizing SWRConfig to implement a global fetcher, but I also have the requirement to override this fetcher in certain components. In such a scenario, would the options specified at a higher level of SWRConfig be applied? <SWRConfig ...

Discover the magic of TransformToggle and slideToggle in Javascript, HTML, and CSS

Working on a website coding project and ran into an issue. Trying to utilize an img as a link to slideToggle content. It's working, but I'd like the img to rotate 90deg on the first click and -90deg on the second one. Any solutions are greatly ap ...

Creating a universal loader for all components in Angular 2: A step-by-step guide

Looking to develop a feature that includes a preloader (an image with a semi-transparent background) for all components that are loading or fetching data from a service. The page consists of various routable blocks, and I want the preloader to appear ove ...