skip to Main Content

I have a next.js app. One of the pages is calling getServerSideProps twice. On the second call, it is returning a string of "[object, Object]" on the second call. This is obviously causing an error when the page tries to load.

This just started and I have no idea how to diagnose the issue. The page takes in two URL arguments. I output those to the console in the getServerSideProps function as shown below. On the first call, the two properties are as input. On the second call the first one is fine, but the second is "[object Object]".

Here is the page …

// React and Next items
import React, { useEffect, useState } from "react";

// Bootstrap items
import { Container, Row, Col } from "react-bootstrap";

// My components
import Layout from "../../../components/layout";
import TagInfo from "./TagInfo";
import TagList from "../../../components/TagList";
import ArticleLine from "../../../components/ArticleLine";

// API functions
import { getFullTagData } from "../../../utils/api/tag";
import { updateTag } from "../../../utils/api/tag";

// Utility functions
import {
  checkChildTagProperties,
  syncCumulativeValues,
} from "../../../utils/tags";
import { updateCumulative } from "../../../utils/api/cumulative";
import { setLatestItems } from "../../../utils/tagLatestItems";

// Contexts
import { useUser } from "../../../Contexts/UserContext";

const Tag = ({ thisTag, childTags, childItems, cumulatives }) => {
  const userData = useUser();
  const [stateTag, setStateTag] = useState(thisTag);
  const [stateTags, setStateTags] = useState(childTags);
  const [stateItems, setStateItems] = useState(childItems);

  const addChildItem = (newItem) => {
    setStateItems([...stateItems, newItem]);
    setLatestItems(stateTag, newItem, stateTag.parent_tag_id);
  };

  const addChildTag = (newTag) => {
    setStateTags([...stateTags, newTag]);
  };

  const handleShowEditArticle = (status, newArticle) => {
    setCurrentArticle(newArticle);
    setShowEditArticle(status);
  };

  const handleShowDeleteItem = (status, item) => {
    setCurrentArticle(item);
    setShowDeleteItem(status);
  };

  // When the page loads, run code to check the child tag properties
  useEffect(() => {
    checkChildTagProperties(stateTag, stateTags, updateTag);
    syncCumulativeValues(
      stateTag,
      stateTags,
      stateItems,
      cumulatives,
      updateTag,
      updateCumulative
    );
    setLatestItems(stateTag.id, stateItems, stateTag.parent_tag_id);
  }, []);

  return (
    <Layout>
      <Container>
        <Row>
          <Col xs={{ span: 12 }} md={{ span: 10, offset: 1 }}>
            <TagInfo
              tag={stateTag}
              cumulatives={cumulatives}
              userData={userData || {}}
              addChildItem={addChildItem}
              addChildTag={addChildTag}
              setThisTag={setStateTag}
            />

            <Row className="accent-top">
              <Col className="mt-3">
                {stateTags.length > 0 && <TagList tags={stateTags} />}
              </Col>
            </Row>
            <Row>
              <Col className="mt-3">
                {stateItems
                  .sort((a, b) =>
                    a.itemDate < b.item_date
                      ? 1
                      : b.itemDate < a.itemDate
                      ? -1
                      : 0
                  )
                  .map((article, i) => (
                    <ArticleLine
                      article={article}
                      parentTag={stateTag}
                      key={`article${i}`}
                      handleShowEditArticle={handleShowEditArticle}
                      handleShowDeleteItem={handleShowDeleteItem}
                    />
                  ))}
              </Col>
            </Row>
          </Col>
        </Row>
      </Container>
    </Layout>
  );
};

export async function getServerSideProps(context) {
  const { pTagId, tagId } = context.params;

  console.log(context.params);

  if (pTagId && tagId && tagId !== "[object Object]") {
    const response = await getFullTagData(pTagId, tagId);
    const thisTag = await response[0].json();
    const childTags = await response[1].json();
    const childItems = await response[2].json();
    const cumulatives = await response[3].json();
    return {
      props: {
        thisTag,
        childTags: childTags.Items || [],
        childItems: childItems.Items || [],
        cumulatives: cumulatives.Items || [],
      },
    };
  } else {
    return {};
  }
}

export default Tag;

2

Answers


  1. Chosen as BEST ANSWER

    Solved. I found this discussion:

    https://github.com/vercel/next.js/discussions/13064

    There was an error with an image that was causing this. I don't really grasp the connection, but it seems that a bad image URL causes a double loud with faulty URL data.


  2. The issue you are experiencing could be related to how the tagId parameter is being passed to the getServerSideProps function. In the console.log statement, you are printing out the context.params object, which should contain the pTagId and tagId values. However, on the second call to getServerSideProps, you are seeing "[object Object]" instead of the tagId value.

    It’s possible that the tagId parameter is being passed incorrectly or as an object instead of a string. One thing you could try is to modify your console.log statement to print out the typeof tagId and the tagId value separately. This would allow you to see the type of the value being passed and ensure that it is a string.

    console.log("typeof tagId: ", typeof tagId);
    console.log("tagId value: ", tagId);
    

    Another possibility is that the issue is related to caching. By default, Next.js caches server-side rendering results for 10 seconds. It’s possible that the second call to getServerSideProps is using a cached result that doesn’t include the correct tagId value. You could try disabling caching by setting the revalidate property to false in your getServerSideProps function:

    return {
      props: {
        thisTag,
        childTags: childTags.Items || [],
        childItems: childItems.Items || [],
        cumulatives: cumulatives.Items || [],
      },
      revalidate: false
    };
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search