标签: react-apollo

我写了一个调用 apollo 的钩子useQuery。这很简单：

使用决策者：

import { useState } from 'react';
import { useQuery, gql } from '@apollo/client';

export const GET_DECIDER = gql`
  query GetDecider($name: [String]!) {
    deciders(names: $name) {
      decision
      name
      value
    }
  }
`;

export const useDecider = name => {
  const [enabled, setEnabled] = useState(false);

  useQuery(GET_DECIDER, {
    variables: {
      name
    },
    onCompleted: data => {
      const decision = data?.deciders[0]?.decision;
      setEnabled(decision);
    },

    onError: error => {
      return error;
    }
  });

  return {
    enabled
  };
};

我现在正在尝试测试它，但MockedProvider …

我正在尝试使用中继样式分页。但是，我在无限滚动时遇到了麻烦。当我滚动或加载下一组数据时，我只会获取当前数据，而不会将其合并到先前的数据中。这就是我所做的

缓存文件

import { InMemoryCache } from '@apollo/client';
import { relayStylePagination } from '@apollo/client/utilities';

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        conversation: relayStylePagination(),
      },
    },
  },
});

export default cache;

会话查询

就我而言，像 first、after、before、last 这样的参数都在 params 对象内

export const CONVERSATION = gql`
  query conversation($channel: ShortId, $contact: ShortId, $params: ConnectionInput) {
    conversation(channel: $channel, contact: $contact, params: $params) {
      status
      data {
        pageInfo {
          ...PageInfo
        }
        edges {
          cursor
          node {
            ...Communication
          }
        }
      }
    }
  }
  ${PAGE_INFO}
  ${COMMUNICATION} …

我使用 Apollo 设置了一个 React 应用程序，以拥有一个处理从网络加载数据的包装器组件，以便下面的每个组件都可以直接从 Apollo 缓存查询数据，而不必担心处理加载状态。因此，我的组件如下所示：

export const COUNT_OFF_ADAPTER_QUERY = gql`
  query CountOffAdapterQuery($vampId: ID!) {
    vamp(id: $vampId) @client {
      id
      countingOff
      countingOffStartTime
    }
  }
`;

export const CountOffAdapter: React.FC<{}> = () => {
  const vampId = useCurrentVampId();

  const {
    data: {
      vamp: { countingOff, countingOffStartTime }
    }
  } = useQuery<CountOffAdapterQuery>(COUNT_OFF_ADAPTER_QUERY, {
    variables: { vampId }
  });

  const prev = usePrevious({ countingOff, countingOffStartTime });

  const countOff = useCountOff();

  useEffect(() => {
    // Do react stuff
  }, [countOff, countingOff, prev]);

  return …

该组件很好地呈现了错误状态，但异常在控制台中显示为未捕获，并且在浏览器的下一个开发中显示对话框。有没有办法处理预期错误来抑制这种行为？

import { useMutation, gql } from "@apollo/client";
import { useEffect } from "react";

const CONSUME_MAGIC_LINK = gql`
  mutation ConsumeMagicLink($token: String!) {
    consumeMagicLink(token: $token) {
      token
      member {
        id
      }
    }
  }
`;

export default function ConsumeMagicLink({ token }) {
  const [consumeMagicLink, { data, loading, error }] =
    useMutation(CONSUME_MAGIC_LINK);

  console.log("DATA", data, "loading:", loading, "error:", error);

  useEffect(() => {
    try {
      consumeMagicLink({ variables: { token } });
    } catch (e) {
      console.log(e);
    }
  }, []);

  var text = "Link has expired …

在我的next.js应用程序中，我尝试配置 Apollo 端点：

import { ApolloServer, gql } from "apollo-server-micro";

// This data will be returned by our test endpoint. Not sure if I need id? https://apuyou.io/blog/serverless-graphql-apollo-server-nextjs
const tacos = {
  meat: [
    {
      type: 'Al Pastor',
      imgURL: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190130-tacos-al-pastor-horizontal-1-1549571422.png?crop=0.668xw:1.00xh;0.175xw,0&resize=480:*'
    },
    {
      type: 'Barbacoa',
      imgURL: 'https://i2.wp.com/www.downshiftology.com/wp-content/uploads/2021/02/Barbacoa-Tacos-3.jpg'
    },
    {
      type: 'Chorizo',
      imgURL: 'https://www.seriouseats.com/thmb/-8LIIIObcZMUBy-9gXlMsHcaeMI=/610x458/filters:fill(auto,1)/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__recipes__images__2014__04__20140428-sloppy-joe-chorizo-taco-recipe-food-lab-lite-8-503212a07b0a4d499952ff40aed57694.jpg'
    },
  ],
  fish: [
    {
      type: 'Camaron',
      imgURL: 'https://juegoscocinarpasteleria.org/wp-content/uploads/2019/07/1563435179_315_Tacos-De-Camarones-Con-Crema-De-Cal-Y-Cilantro.jpg'
    },
    {
      type: 'Salmon',
      imgURL: 'https://www.cookingclassy.com/wp-content/uploads/2015/04/salmon-tacos-with-avocado-salsa4-srgb..jpg'
    },
    {
      type: 'Pulpo',
      imgURL: 'https://images.squarespace-cdn.com/content/v1/5710a8b3e707ebb8c58fea2c/1590075315244-QNXQE1LGPH06HV3EDF6B/tacos_34.jpg?format=1000w'
    },
  ],
  veggi: [
    {
      type: …