Gatsby JS, Restful API에서 데이터 가져오기

Gatsby JS, Restful API에서 데이터 가져오기

나는 리액트와 개츠비 JS 둘 다 처음이야.서드파티제 Restful API에서 데이터를 쉽게 로드할 수 없어 혼란스럽습니다.

예를 들어 randomuser.me/API에서 데이터를 가져와 페이지 단위로 데이터를 사용할 수 있도록 하고 싶습니다.

예를 들어 다음과 같습니다.

  import React from 'react'
  import Link from 'gatsby-link'

  class User extends React.Component {
    constructor(){
      super();
      this.state = {
        pictures:[],
      };

    }

    componentDidMount(){
      fetch('https://randomuser.me/api/?results=500')
      .then(results=>{
        return results.json();
      })
      .then(data=>{
        let pictures = data.results.map((pic,i)=>{
            return(
              <div key={i} >
                <img key={i} src={pic.picture.medium}/>
              </div>
            )
        })
        this.setState({pictures:pictures})
      })
    }

    render() {
      return (<div>{this.state.pictures}</div>)
    }
  }

  export default User;

단, 사용자를 필터링 및 정렬하기 위해 GraphQL의 도움을 받고 싶습니다.

데이터를 가져오고 GraphQL에 삽입하는 방법에 대한 샘플을 찾을 수 있도록 도와주시겠습니까?gatsby-node.js?

GraphQL을 사용하여 데이터를 가져오려면 다음 명령을 생성해야 합니다.sourceNode소스 플러그인 작성에 대한 문서가 도움이 될 수 있습니다.

다음 단계에 따라 쿼리할 수 있습니다.randomuserGatsby 프로젝트에서 GraphQL을 사용한 데이터입니다.

1) gatsby-node.js에 노드를 만듭니다.

루트 프로젝트 폴더에서 이 코드를 추가합니다.gatsby-node.js:

const axios = require('axios');
const crypto = require('crypto');

exports.sourceNodes = async ({ actions }) => {
  const { createNode } = actions;

  // fetch raw data from the randomuser api
  const fetchRandomUser = () => axios.get(`https://randomuser.me/api/?results=500`);
  // await for results
  const res = await fetchRandomUser();

  // map into these results and create nodes
  res.data.results.map((user, i) => {
    // Create your node object
    const userNode = {
      // Required fields
      id: `${i}`,
      parent: `__SOURCE__`,
      internal: {
        type: `RandomUser`, // name of the graphQL query --> allRandomUser {}
        // contentDigest will be added just after
        // but it is required
      },
      children: [],

      // Other fields that you want to query with graphQl
      gender: user.gender,
      name: {
        title: user.name.title,
        first: user.name.first,
        last: user.name.last,
      },
      picture: {
        large: user.picture.large,
        medium: user.picture.medium,
        thumbnail: user.picture.thumbnail,
      }
      // etc...
    }

    // Get content digest of node. (Required field)
    const contentDigest = crypto
      .createHash(`md5`)
      .update(JSON.stringify(userNode))
      .digest(`hex`);
    // add it to userNode
    userNode.internal.contentDigest = contentDigest;

    // Create node with the gatsby createNode() API
    createNode(userNode);
  });

  return;
}

나는 사용했다axios데이터를 가져와 설치해야 합니다.npm install --save axios

설명:

목표는 사용할 각 데이터에 대해 각 노드를 생성하는 것입니다.createNode 매뉴얼에 따르면 필수 필드(id, parent, internal, children)가 거의 없는 객체를 제공해야 합니다.

randomuser API에서 결과 데이터를 가져오면 이 노드 개체를 생성하여createNode()기능.

500명의 랜덤 유저를 취득하고 싶은 경우의 결과를 나타냅니다.https://randomuser.me/api/?results=500.

작성하다userNode필수 필드 및 원하는 필드를 포함하는 개체.앱에서 사용할 데이터에 따라 필드를 추가할 수 있습니다.

를 사용하여 노드를 작성하기만 하면 됩니다.createNode()Gatsby API의 기능.

2) 그래프로 데이터를 조회하다품질

그렇게 했으니 도망쳐라gatsby develophttp://localhost:8000/__graphql로 이동합니다.

GraphQL을 사용하여 완벽한 쿼리를 만들 수 있습니다.이름 붙였듯이internal.type노드 오브젝트의'RandomUser'문의할 수 있습니다.allRandomUser데이터를 얻을 수 있습니다.

{
  allRandomUser {
    edges {
      node {
        gender
        name {
          title
          first
          last
        }
        picture {
          large
          medium
          thumbnail
        }
      }
    }
  }
}

3) Gatsby 페이지에서 이 쿼리를 사용합니다.

예를 들어 페이지에서는src/pages/index.js쿼리를 사용하여 데이터를 표시합니다.

import React from 'react'
import Link from 'gatsby-link'

const IndexPage = (props) => {
  const users = props.data.allRandomUser.edges;

  return (
    <div>
      {users.map((user, i) => {
        const userData = user.node;
        return (
          <div key={i}>
            <p>Name: {userData.name.first}</p>
            <img src={userData.picture.medium} />
          </div>
        )
      })}
    </div>
  );
};

export default IndexPage

export const query = graphql`
  query RandomUserQuery {
    allRandomUser {
      edges {
        node {
          gender
          name {
            title
            first
            last
          }
          picture {
            large
            medium
            thumbnail
          }
        }
      }
    }
  }
`;

바로 그거야!

감사합니다. 저는 잘 동작하고 있습니다.동기를 사용할 때 오류가 발생하여 gastbyjs-node.js의 작은 부분만 변경합니다.babel을 사용하여 동기화 또는 대기할 수 있도록 빌드 프로세스의 일부를 변경해야 할 것 같습니다.

여기 나에게 맞는 코드가 있습니다.

 const axios = require('axios');
 const crypto = require('crypto');

 // exports.sourceNodes = async ({ boundActionCreators }) => {
 exports.sourceNodes = ({boundActionCreators}) => {
const {createNode} = boundActionCreators;
return new Promise((resolve, reject) => {

// fetch raw data from the randomuser api
// const fetchRandomUser = () => axios.get(`https://randomuser.me/api/?results=500`);
// await for results
// const res = await fetchRandomUser();

axios.get(`https://randomuser.me/api/?results=500`).then(res => {

  // map into these results and create nodes
  res.data.results.map((user, i) => {

    // Create your node object
    const userNode = {
      // Required fields
      id: `${i}`,
      parent: `__SOURCE__`,
      internal: {
        type: `RandomUser`, // name of the graphQL query --> allRandomUser {}
        // contentDigest will be added just after
        // but it is required
      },
      children: [],

      // Other fields that you want to query with graphQl
      gender: user.gender,
      name: {
        title: user.name.title,
        first: user.name.first,
        last: user.name.last
      },
      picture: {
        large: user.picture.large,
        medium: user.picture.medium,
        thumbnail: user.picture.thumbnail
      }
      // etc...
    }

    // Get content digest of node. (Required field)
    const contentDigest = crypto.createHash(`md5`).update(JSON.stringify(userNode)).digest(`hex`);
    // add it to userNode
    userNode.internal.contentDigest = contentDigest;

    // Create node with the gatsby createNode() API
    createNode(userNode);
  });
  resolve();
});

});

}

에 대해 은 아주. 단, '사용 를 사용할 에는 ' 금지 경고'가 수 .사용자가 다음 명령을 사용할 경우 권장 해제 경고가 있음을 주의해 주십시오.boundActionCreators.로 이름을 츠키다actions이 경고를 피하기 위해.

리액트 API를 수 .useEffect은 완벽하게

 const [starsCount, setStarsCount] = useState(0)
  useEffect(() => {
    // get data from GitHub api
    fetch(`https://api.github.com/repos/gatsbyjs/gatsby`)
      .then(response => response.json()) // parse JSON from request
      .then(resultData => {
        setStarsCount(resultData.stargazers_count)
      }) // set data for the number of stars
  }, [])

스텝 2의 쿼리를 제외하고 위의 답변은 기능합니다.노드는 1개밖에 반환되지 않는 것 같습니다.totalCount를 엣지의 형제로서 추가하여 모든 노드를 반환할 수 있습니다.예.

{
  allRandomUser {
    totalCount
    edges {
      node {
        id
        gender
        name {
          first
          last
        }
      }
    }
  }
}

언급URL : https://stackoverflow.com/questions/49299309/gatsbyjs-getting-data-from-restful-api