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. 

  • 相关阅读:
    23.什么是控制文件?
    路由器原理及路由协议
    大家帮忙看看,不会即使显示串口缓冲数据
    c# interface
    ip classless&no ip classless
    Visual Studio 2010 Visual C++ 确定要重新分发的 DLL
    fibonacci算法
    loopback端口作用
    疑惑的virtual method
    Read MBR via ReadFile function
  • 原文地址:https://www.cnblogs.com/Answer1215/p/14444822.html
Copyright © 2011-2022 走看看