xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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 <div>Loading...</div>;
  if (data.posts.length === 0) return <Empty />;

  return (
    <>
      <header className={classes.header}>
        <h2 className={classes.h2}>All Posts</h2>
        <Link to="/new" className={classes.newPost}>
          New Post
        </Link>
      </header>
      {data.posts.map(post => (
        <Post key={post.id} post={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 发布文章使用：只允许注册用户才可以访问！

---