标签: react-apollo

我对 graphQL 和 Apollo 相当陌生。我希望我能清楚地表达自己：

我正在使用 apollo/react-hook 获取数据useQuery。然后，我用数据填充表单，以便客户可以更改它。当他完成后，数据将使用发送回服务器useMutation。

到目前为止，我习惯onCompleted将获取的数据存储在组件状态中。看起来像这样：

import React, { useState } from 'react';
import { TextField } from '@material-ui/core'; 
const Index = () => {
    const [state, setState] = useState(null)
    const {data, loading, error} = useQuery<typeof queryType>(query, {
        onCompleted: data => {
            // modify data slightly
            setState(data)
        }
    })

    return (
        <TextField value={state} onChange={() => setState(event.target.value)}/>
    )
}

然后，表单使用存储在组件状态中的值，并且表单处理程序用来setState 更改它。

我现在的问题是，这是否是最佳实践，以及是否有必要将获取的数据存储在本地组件状态中。

我正在尝试向 FlatList 添加无限滚动功能：

<FlatList
   data={pickupsGroups}
   renderItem={({item , index}: {item: PickupGroup, index: number}) => {
                    return <PickingCard group={item} onPress={onPressPickup}/>
   }}
   onRefresh={onRefresh}
   keyExtractor={item => `${item?.title}-${item?.totalSku}`}
   refreshing={refreshing}
   onEndReached={() => {
     setPage(page + 1)
   }}
   onEndReachedThreshold={0.1}
/>

当page更改时，我运行 GraphQL 查询：

    const {loading} = useQuery(MY_GROUPS, {
        variables: {limit: 10, page},
        fetchPolicy: "network-only",
        onCompleted: data => {
            setPickupsGroups(pickupsGroups.concat(data.myPickupGroups.pickupGroups))
        }
    })

但每次我向 中添加新项目时pickupGroups，FlatList 都会滚动回顶部

我最近刚刚开始学习 GraphQL 和 React-Apollo，我想知道如果我需要在同一个组件中使用useQuery和挂钩，推荐的使用方法是什么。useMutation由于两个钩子都返回{data, loading, error}对象，因此名称存在冲突。我应该在解构时为属性分配唯一的名称，还是将逻辑移动到单独的容器组件更好？

我有一个带有 React 和 Apollo Client 的前端，并且正在尝试编写一些简单的测试。

我的应用程序如下所示：

ApolloProvider.js

import React from "react"
import App from "./App"
import ApolloClient from "apollo-client"
import { InMemoryCache } from "apollo-cache-inmemory"
import { createHttpLink } from "apollo-link-http"
import { ApolloProvider } from "@apollo/react-hooks"
import { setContext } from "apollo-link-context"

const httpLink = createHttpLink({
  uri: "...backend....",
})

const authLink = setContext(() => {
  const token = localStorage.getItem("jwtToken")
  return {
    headers: {
      Authorization: token ? `Bearer ${token}` : "",
    },
  }
})

const client = new ApolloClient({ …

无论如何，我可以检查所有缓存，例如：apollo 内的更改以进行调试。像 redux store 这样的东西，你可以在其中查看整个状态树。

他们提到：

缓存按 ID 将对象存储在平面查找表中。 https://www.apollographql.com/docs/react/caching/cache-configuration/

有什么方法可以显示/控制台整个查找表吗？

我正在尝试从我的反应应用程序中的服务器获取国家/地区列表graphql。该getAllCountry查询在操场上运行良好，但每当我在应用程序上调用相同的查询时，我都会收到以下错误：

1. “需要查询选项。您必须在查询选项中指定您的 GraphQL 文档”（屏幕上显示错误），

2. “未捕获的不变违规：需要查询选项。您必须在查询选项中指定您的 GraphQL 文档。” （控制台错误）

我的代码如下所示：

// gql query inside gqlQueries.js

export const GET_ALL_COUNTRIES = gql`
  query getAllCountry {
    getAllCountry {
      name
      id
      countryCode
      currencyCode
    }
  }
`;

// calling the query

 import { queries as gql } from "./gqlQueries";

 const getAllCountries = () => {
    client
      .query({
        query: gql.GET_ALL_COUNTRIES
      })
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => console.log(err));
  };

我非常确定我的客户端配置正确，因为我的gqlQueries.js文件中有其他查询，并且除了这个特定的查询 ( getAllCountry) 之外，它们都工作正常。

我有一个使用 Apollo Client v1 的基本应用程序：

const client = new ApolloClient({...

...

<ApolloProvider client={client}>
   <App />
</ApolloProvider>,

我想知道如何让我的应用程序的其余部分访问该client对象，以便他们可以使用client.query?

导出客户端然后将其导入另一个文件中的唯一方法吗？

由于我的应用程序包装在 a 中ApolloProvider，我想可能有一种client使用 Apollo 特定导入进行导入的方法？

我目前正在尝试在我的posts. 这里使用 Apollo graphql 是我的 useQuery

const { data: postsData, fetchMore } = useQuery(POSTS_BY_USER_DRAFT, {
fetchPolicy: 'network-only',
variables: {
  user: user.id,
  start: 0,
  limit: limit
},
onCompleted: () => {
  setTotal(postsData[model].meta.pagination.total)
}})

这是我的 onClick 处理程序，用于获取更多内容posts

const loadMorePosts = async () => {
const nextStart = start + limit
setStart(nextStart);
await fetchMore({
  variables: {
    user: user.id,
    offset: nextStart,
    limit: limit,
  },
  updateQuery: (prevResult, { fetchMoreResult }) => {
    if (!fetchMoreResult) {
      return prevResult
    }
    const prevData = prevResult[model].data …

我在由 Expo v44.0.6 管理的项目中使用 React Native 中的 Apollo Client v3.5.10。有时，GraphQL 查询会返回一条错误，指出Unexpected token < in JSON at position 0。我理解这意味着服务器返回 HTML 而不是格式良好的 JSON。

有谁知道如何通过代码查看这个原始响应？我可以在 iOS 模拟器的网络检查器中看到它（通常是 404），但这非常不方便，并且对我的生产没有帮助。

我尝试通过 onError 创建错误链接（来自@apollo/client/link/error）。它有效，但只能向我显示相同的“意外令牌...”消息。我还没有弄清楚是否有办法查看实际的原始 HTML 响应或通过代码获取状态。

任何帮助将不胜感激。

我正在使用 React 和 apollo-client。如果用户不是注释的所有者，则应重定向该注释。但重定向后我收到：Warning: Cannot update a component ('BrowserRouter') while rendering a different component ('EditNote'). To locate the bad setState() call inside 'EditNote'。据我了解，组件中存在useState()问题<NoteForm/>。我做错了什么？

import React, { useEffect } from "react";
import { useMutation, useQuery } from "@apollo/client";
import { useNavigate, useParams } from "react-router-dom";

import NoteForm from "../components/NoteForm";

import { GET_NOTE, GET_ME } from "../gql/query";
import { EDIT_NOTE } from "../gql/mutation";

const EditNote = () => {
    const navigate = useNavigate();
    const params = …