zoukankan      html  css  js  c++  java
  • [Graphql] Apollo Client Example

    Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.

    Apollo Client helps you structure code in an economical, predictable, and declarative way that's consistent with modern development practices. The core @apollo/client library provides built-in integration with React, and the larger Apollo community maintains integrations for other popular view layers.

    On client side, we still keep the data inside our memory, and we want to connect Graphql API, so that we use @apollo/client 

    Config setup:

    const React = require("react");
    const {
      ApolloClient,
      ApolloProvider,
      HttpLink,
      InMemoryCache,
    } = require("@apollo/client");
    const wrapRootElement = require("./wrap-root-element");
    
    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: new HttpLink({
        uri: "https://gxxxxxxxxxx.netlify.app/.netlify/functions/graphql",
      }),
    });
    
    exports.wrapRootElement = ({ element }) => (
      <ApolloProvider client={client}>
        {wrapRootElement({ element })}
      </ApolloProvider>
    );

    Example:

    import React, { useContext, useReducer, useRef } from "react";
    import { IdentityContext } from "../../identity-context";
    import {
      Container,
      Flex,
      Button,
      Input,
      Label,
      NavLink,
      Checkbox,
    } from "theme-ui";
    import { Link } from "@reach/router";
    import { gql, useMutation, useQuery } from "@apollo/client";
    
    const ADD_TODO = gql`
      mutation AddTodo($text: String!) {
        addTodo(text: $text) {
          id
        }
      }
    `;
    
    const UPDATE_TODO_DONE = gql`
      mutation UpdateTodoDone($id: ID!) {
        updateTodoDone(id: $id) {
          text
          done
        }
      }
    `;
    
    const GET_TODOS = gql`
      query GetTodos {
        todos {
          id
          text
          done
        }
      }
    `;
    
    const Dash = () => {
      const { user, identity: netlifyIdentity } = useContext(IdentityContext);
      const inputRef = useRef();
      const [addTodo] = useMutation(ADD_TODO);
      const [updateTodoDone] = useMutation(UPDATE_TODO_DONE);
      const { loading, error, data, refetch } = useQuery(GET_TODOS);
      return (
        <Container>
          <Flex as="nav">
            <NavLink as={Link} to="/" p={2}>
              Home
            </NavLink>
            <NavLink as={Link} to={"/app"} p={2}>
              Dashboard
            </NavLink>
            {user && (
              <NavLink
                href="#!"
                p={2}
                onClick={() => {
                  netlifyIdentity.logout();
                }}
              >
                Log out {user.user_metadata.full_name}
              </NavLink>
            )}
          </Flex>
          <Flex
            as="form"
            onSubmit={async (e) => {
              e.preventDefault();
              await addTodo({ variables: { text: inputRef.current.value } });
              inputRef.current.value = "";
              await refetch();
            }}
          >
            <Label sx={{ display: "flex" }}>
              <span>Add&nbsp;Todo</span>
              <Input ref={inputRef} sx={{ marginLeft: 1 }} />
            </Label>
            <Button sx={{ marginLeft: 1 }}>Submit</Button>
          </Flex>
          <Flex sx={{ flexDirection: "column" }}>
            {loading ? <div>loading...</div> : null}
            {error ? <div>{error.message}</div> : null}
            {!loading && !error && (
              <ul sx={{ listStyleType: "none" }}>
                {data.todos.map((todo, i) => (
                  <Flex
                    as="li"
                    key={todo.id}
                    onClick={async () => {
                      await updateTodoDone({ variables: { id: todo.id } });
                      await refetch();
                    }}
                  >
                    <Checkbox checked={todo.done} />
                    <span>{todo.text}</span>
                  </Flex>
                ))}
              </ul>
            )}
          </Flex>
        </Container>
      );
    };
    
    export default Dash;

    To keep data in order (client and server), we use 'async/await' to wait fetch request to be resolved first, then we call 'refetch()' to get latest data to get latest data from backend. 

  • 相关阅读:
    java与C#、.NET AES加密、解密 解决方案
    java 类名.class、object.getClass()和Class.forName()的区别 精析
    java instanceof和isInstance的关系 精析
    java 反汇编class文件
    织梦默认分页样式改动 解决分页列表显示,去掉li
    The method Inflate() in android
    leetcode第一刷_Edit Distance
    codeforces round #264(div2)
    android开发游记:SpringView 下拉刷新的高效解决方式,定制你自己风格的拖拽页面
    《linux 内核全然剖析》 chapter 4 80x86 保护模式极其编程
  • 原文地址:https://www.cnblogs.com/Answer1215/p/14444822.html
Copyright © 2011-2022 走看看