How to pass hygraph (GraphCMS) graphql query to element / div (mapping query to elements)

Question

I can't figure out how to access the query for a element through code.

I have query request, but I do now know how to fetch and map the query to elements.

Here is the code of query fetch:


import { request, gql } from "graphql-request";

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT;

export const getPosts = async () =\> {
const query = gql`    query MyQuery {       postsConnection {         edges {           node {             author {               bio               name               id               photo {                 url               }             }             createdAt             slug             title             excerpt             featuredImage {               url             }             categories {               name               slug             }           }         }       }     }  `;

const results = await request(graphqlAPI, query);

return results.postConnection.edges;
};

Here is where I specify the endpoint:

NEXT_PUBLIC_GRAPHCMS_ENDPOINT=https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/cl9pn1q9a1ubu01t243uj1rnr/master

Here is how I imagine doing this but can't access the proper properties/queries:

import { getPosts } from "../services/GraphRequests";
import React from "react";

function Blog() {
  return <div>{getPosts}</div>;

or

return <div>getPosts.map or something)


}

export default Blog;

Here is how I tried to get the data:


import React from "react";
import { useEffect, useState } from "react";
import request from "graphql-request";

function Blog() {
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    const fetchPosts = async () => {
      const { posts } = await request(
        "https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/cl9pn1q9a1ubu01t243uj1rnr/master",

        `{postsConnection {
          edges {
            node {
              author {
                bio
                name
                id
                photo {
                  url
                }
              }
              createdAt
              slug
              title
              excerpt
              featuredImage {
                url
              }
              categories {
                name
                slug
              }
            }
          }
        }}`
      );

      setPosts(posts);
    };

    fetchPosts();
  }, []);

  return <div>{console.log(posts)}</div>;
}
export default Blog;

This returns "posts" as null and gives 400 ERROR. – Konjak Oct 26 '22 at 21:31 — Konjak, Oct 26 '22 at 21:31

score 0 · Answer 1 · answered Oct 27 '22 at 16:33

This is how I made it work:


    import React from "react";

import request, { gql } from "graphql-request";

function Blog() {
  const QUERY = gql`
    query MyQuery {
      postsConnection {
        edges {
          node {
            author {
              bio
              name
              id
              photo {
                url
              }
            }
            createdAt
            slug
            title
            excerpt
            featuredImage {
              url
            }
            categories {
              name
              slug
            }
          }
        }
      }
    }
  `;
  const theFetchedData = request(
    "https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/cl9pn1q9a1ubu01t243uj1rnr/master",
    QUERY
  ).then((data) => console.log(data));

  return <div>{JSON.stringify(theFetchedData)}</div>;
}

export default Blog;

How to pass hygraph (GraphCMS) graphql query to element / div (mapping query to elements)

1 Answers1