标签: react-apollo

我正在拨打电话，返回问题及其答案。当我直接向服务器发送此消息时，响应符合预期。此外，当 React 进行调用并且我检查开发人员工具时，响应符合预期。

一旦我收到阿波罗的回应，数据就变得混杂，结果也相互渗透。

您会注意到，在这两张图中，扩展一些结果后的结果是相同的。我不确定是什么原因造成的。

为什么要结合自由形式？

我的设置是这样的：

我导入查询，然后在 Apollo 客户端上运行：

this.props.client.query({ query: getCoreObjectsQuery, variables: { companyId: 1}})
              .then((result) => {
                console.log(result, 'getCoreObjectsQuery')

从那里，当我查看 getCoreObjectsQuery 时，它看起来像上面的图像！

我正在尝试使用 Apollo 查询 GraphQl API。我正在用打字稿在 React 中执行此操作，但我无法让查询组件停止抛出错误。我对整个组合很陌生，所以我可能做了一些明显错误的事情。有任何想法吗？

这是错误：

Type '{ children: (string | (({ loading, error, data }: QueryResult<any, OperationVariables>) => any))[]; query: any; }' is not assignable to type 'Pick<Readonly<QueryProps<any, OperationVariables>> & Readonly<{ children?: ReactNode; }>, "children" | "displayName" | "skip" | "onCompleted" | "onError" | "ssr" | "variables" | ... 6 more ... | "partialRefetch">'.
  Types of property 'children' are incompatible.
    Type '(string | (({ loading, error, data }: QueryResult<any, OperationVariables>) => any))[]' is not assignable to type …

我正在像这样设置 Apollo 客户端。

const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'cache-and-network',
    errorPolicy: 'all',
  },
  mutate: {
    errorPolicy: 'all',
  },
};
return new ApolloClient({
  link: ApolloLink.from([authLink, errorLink, webSocketOrHttpLink]),
  defaultOptions, // Typescript don't like this.
  queryDeduplication: true,
});

打字稿给出了这个错误：

Type '{ watchQuery: { fetchPolicy: string; errorPolicy: string; }; query: { fetchPolicy: string; errorPolicy: string; }; mutate: { errorPolicy: string; }; }' is not assignable to type 'DefaultOptions'.ts(2322)
ApolloClient.d.ts(23, 5): The expected type comes from property …

看起来可以通过取消挂起的请求client.stop()，但是当我们使用apollo client hooks没有client.

如何使用 apollo 客户端挂钩停止待处理的请求？

这是我的代码

const { loading, error, data } = useQuery(HeaderPage.query, {
    fetchPolicy: "no-cache"
  });

当我使用 fetchPolicy 时：“无缓存”。多次请求也不行。

为什么只发出一次请求？

我在两个单独的存储库中有一个 React 客户端项目和一个 Node.js/GraphQL api。

在我的 React 应用程序中，我想将一个对象作为变量类型传递到我的突变中。这是我的突变的样子：

export const CREATE_SPEAKER = gql`

  input Expertise {
    title: String!
    domain: String!
  }

  mutation CreateSpeaker(
    $name: String!
    $age: String!
    $nationality: String!
    $avatar: String!
    $expertise: Expertise!
  ) {
    createSpeaker(
      speakerInput: {
        name: $name
        age: $age
        nationality: $nationality
        avatar: $avatar
        expertise: $expertise
      }
    ) {
      name
      age
      nationality
      avatar
      expertise {
        title
        domain
      }
    }
  }
`;

在我的 Node.js 项目中，我有以下架构：

input SpeakerInput {
      name: String!
      age: String!
      expertise: ExpertiseInput!
      nationality: String!
      avatar: String
} …

根据 Hasura 中的用户角色动态更改 Apollo SubscriptionClient 中的标头的正确方法是什么？

堆：

• 下一个JS
• 阿波罗
• 授权0
• Hasura（使用角色列存储 Auth0_Id）

这里的目标是利用 Hasura 角色获取权限。我知道 JWT 令牌具有允许的角色，但我希望能够根据用户分配的角色设置角色。我要走的路径是通过 NextJS 内部 API 使用来自 auth0 的 userID 查询 Hasura 用户表中的角色。

ApolloClient.js

import fetch from 'isomorphic-unfetch'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import { onError } from 'apollo-link-error'
import { WebSocketLink } from 'apollo-link-ws'
import { SubscriptionClient } from 'subscriptions-transport-ws'

let accessToken, role, user = null
const requestAccessToken = async () => …

我正在使用useLazyQuery按钮单击来触发查询。查询被调用一次后，结果（数据、错误等）会在每次渲染时传递给组件渲染。例如，当用户输入新的文本输入来更改导致错误的原因时，这是有问题的：错误消息不断重复出现。所以我想“清除”查询（例如，当用户在 TextInput 中键入新数据时），以便查询结果返回到初始状态（一切undefined）并且错误消息消失。

我在 Apollo 文档中找不到任何明确的方法来做到这一点，那我该怎么做呢？

（我虽然将查询放在父组件中，因此它不会在每次重新渲染时更新，但我宁愿不这样做）

这是我当前设置组件的方式：

import { useLazyQuery } from 'react-apollo'

// ...

const [inputValue, setInputValue] = useState('')

const [getUserIdFromToken, { called, loading, data, error }] = useLazyQuery(deliveryTokenQuery, {
  variables: {
    id: inputValue.toUpperCase(),
  },
})

useEffect(() => {
  if (data && data.deliveryToken) {
    onSuccess({
      userId: data.deliveryToken.vytal_user_id,
      token: inputValue,
    })
  }
}, [data, inputValue, onSuccess])

// this is called on button tap
const submitToken = async () => {
  Keyboard.dismiss()
  getUserIdFromToken()
}

// later …

我正在开发一个阵营目前正使用的绑在GraphQL突变形式useMutation的阿波罗客户端。在服务器上，我执行一些验证，如果出现错误，我拒绝突变。在客户端，我使用error对象来接收验证错误。我的钩子看起来像这样：

const [addDrone, { error }] = useMutation(ADD_DRONE)

因此，我将error对象解包并在对话框中将其呈现给用户，让他/她知道出了什么问题。在用户关闭对话框后，我想让用户有机会修复错误，以便他/她可以重新提交表单。这就是事情变得毛茸茸的地方。我想error在用户关闭对话框时清除对象，但由于这个变量来自useMutation钩子，我无法改变或重置它。看起来useMutation被设计为一次发射，不再使用。

所以我的问题是，有没有办法将useMutation钩子“重置”回它的原始状态？

尝试refetchQueries在我的useMutation钩子中定义时遇到以下错误。

Type 'DocumentNode' is not assignable to type 'string | PureQueryOptions'.  
Property 'query' is missing in type 'DocumentNode' but required in type 'PureQueryOptions'.

我不确定我做错了什么，因为 Apollo 的官方文档对此有点不清楚，而且我在谷歌搜索时找不到任何优先级。

据我了解该错误，query我的 GraphQL 查询中缺少该属性。我是否将正确的值传递给了refetchQueries？我认为我做得对，但后来我不知道为什么它抱怨query没有参与其中。

代码

import { useMutation, useQuery } from '@apollo/client';
import { GET_CUSTOMERS, MARK_AS_VIP } from './queries';

export default function Customers() {
  const [ markAsVIP, { data: vips, loading: vipLoading, error: vipError } ] = useMutation( MARK_AS_VIP );
  const { loading, error, data: …