Как передать запрос graphql hygraph (GraphCMS) в элемент / div (сопоставление запроса элементам)

Question

Я не могу понять, как получить доступ к запросу элемента через код.

У меня есть запрос запроса, но теперь я знаю, как получить и сопоставить запрос с элементами.

Вот код выборки запроса:

      
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;
};

Здесь я указываю конечную точку:

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

Вот как я себе это представляю, но не могу получить доступ к нужным свойствам/запросам:

      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;

Вот как я пытался получить данные:

      
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;

Answer 1

Вот как я заставил это работать:

      
    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;