React + GraphQL 2020 速成课程

React + GraphQL 2020 速成课程

technologies

React (to build our user interface)

GraphQL (to get and change data in a declarative way)

Apollo Client (to allow us to use React and GraphQL together)

Hasura (to create and manage our GraphQL API + database)

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://react-graphql.herokuapp.com/v1/graphql"
});

import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";

export const GET_POSTS = gql`
  query getPosts {
    posts {
      id
      title
      body
      createdAt
    }
  }
`;

function App() {
  const { data, loading } = useQuery(GET_POSTS);

  if (loading) return 
Loading...
;
  if (data.posts.length === 0) return ;

  return (
    <>
      

        
All Posts
        
          New Post
        
      
      {data.posts.map(post => (
        
      ))}
    
  );
}

refs

https://www.freecodecamp.org/news/the-react-graphql-2020-crash-course/

lectures

https://learn.codeartistry.io/courses/2020-react-graphql/lectures/19445637

https://learn.codeartistry.io/courses/2020-react-graphql/lectures/19445640

https://learn.codeartistry.io/courses/2020-react-graphql/lectures/19445642

https://learn.codeartistry.io/courses/2020-react-graphql/lectures/19445643

https://learn.codeartistry.io/courses/2020-react-graphql/lectures/19445638

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---