0

This is my Graphql query for getting posts from headless wordpress:

export const GET_POSTS = gql`
 query GET_POSTS( $uri: String, $perPage: Int, $offset: Int, $categoryId: Int ) {
 
  posts: posts(where: { categoryId: $categoryId, offsetPagination: { size: $perPage, offset: $offset }}) {
    edges {
      node {
        id
        title
        excerpt
        slug
        featuredImage {
          node {
            ...ImageFragment
          }
        }
        categories {
          edges {
            node {
              categoryId
              name
            }
          }
        }
      }
    }
    pageInfo {
      offsetPagination {
        total
      }
    }
  }
 }
 
 ${ImageFragment}
 
 `;

When i do this: console.log("DATAAAA", data.posts.edges);

i get:

    DATAAAA [
  {
    node: {
      id: 'cG9zdDo0MA==',
      title: 'postttt',
      excerpt: '<p>dlkfjdsflkdslkdjfkldsf</p>\n',
      slug: 'postttt',
      featuredImage: null,
      categories: [Object],
      __typename: 'Post'
    },
    __typename: 'RootQueryToPostConnectionEdge'
  },
  {
    node: {
      id: 'cG9zdDox',
      title: 'Hello world!',
      excerpt: '<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n',
      slug: 'hello-world',
      featuredImage: null,
      categories: [Object],
      __typename: 'Post'
    },
    __typename: 'RootQueryToPostConnectionEdge'
  }
]

But when try to go further, inside node, like this: console.log("DATAAAA", data.posts.edges.node); in order to get the categoryId which is inside categories: [Object], i get undefined.

How to get categoryId based on this query?

What i want to do is to get only the posts by a given category in getStaticProps like this, but i dont know how to get that categoryId dynamically. This is what my getStaticProps function looks like:

export async function getStaticProps(context) {
  console.log("THE CONTEXT", context);
  const { data, errors } = await client.query({
    
    query: GET_POSTS,
    variables: {
      uri: context.params?.slug ?? "/",
      perPage: PER_PAGE_FIRST,
      offset: null,
      categoryId: <===== How to get this dynamically?
    },
  });

  const defaultProps = {
    props: {
      data: data || {},
    },
    
    revalidate: 1,
  };

  return handleRedirectsAndReturnData(defaultProps, data, errors, "posts");
}

This is my getStaticPaths function:

export async function getStaticPaths() {
  const { data } = await client.query({
    query: GET_CATEGORY_SLUGS_ID,
  });

  const pathsData = [];

  data?.categories?.edges.node &&
    data?.categories?.edges.node.map((category) => {
      if (!isEmpty(category?.slug)) {
        pathsData.push({ params: { slug: category?.slug } });
      }
    });

  return {
    paths: pathsData,
    fallback: FALLBACK,
  };
}

and this is what i get from context console.log("THE CONTEXT", context);:

THE CONTEXT {
  params: { slug: 'uncategorized' },
  locales: undefined,
  locale: undefined,
  defaultLocale: undefined
}

Any help would be appreciated.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Ilir
  • 488
  • 5
  • 20
  • what happens if you try `console.log("DATAAAA", data.posts.edges[0].node);`? – mikerojas Jan 21 '22 at 20:38
  • edges appears to be an `array`. – mikerojas Jan 21 '22 at 20:39
  • i just edited my question to show what i get in that array. yes, its an array of posts. but i dont know how to tell nextjs to get only the posts which has that particular `categoryId`. look at the `getStaticProps` function. i need to get that `categoryId` and pass it to the Apollo client variables. When i hardcore the `categoryId` value in the `variables: {categoryId: 4}`, i get what i expect. – Ilir Jan 21 '22 at 20:56
  • Do you have anything in `context.params` that can either provide you the `categoryId` or help you retrieve it from WordPress? Also, what does the path to that page look like? – juliomalves Jan 22 '22 at 19:22
  • @juliomalves i edited my question. I tried to find that in `context` but i only get the `slug` there. Wordpress doesn't pass the `categoryId` as params. Its in the query of the posts itself. Maybe i have to `.map` through the categories and pass it as props, but here my logic stops how to do it. – Ilir Jan 22 '22 at 23:20

0 Answers0