标签: react-apollo

我有一个 Apollo GraphQL 服务器与 API 通信，返回响应的大致结构如下：

{
  "pagination": {
    "page": 1,
    // more stuff
  },
  sorting: {
    // even more stuff
  },
  data: [ // Actual data ]
}

这个结构将在我广泛使用的这个 API 的几乎所有响应中共享。data大多数情况下将是一个数组，但也可以是一个对象。

我如何以有效的方式编写它，以便我不必在模式中的每个数据类型上重复所有这些pagination和sorting字段？

非常感谢！

我有一个用作react-table数据网格的函数。它最初是通过本地状态从父组件中的 Apollo 填充的，网格中的每一行都是数组中的对象。

当网格中的单元格发生变化时，整条线对象都会被写入状态。

我正在尝试使用 useEffect 触发一个突变，将这些状态更改写回数据库，但我正在努力解决两个主要问题：

• 该突变不会写回数据库（尽管该突变在 graphql 游乐场中确实有效）
• 了解如何仅将更改的行发送回突变。

主要功能（部分）

function Table2({ columns, data }) {
  const [lines, setLines] = useState(data);
  const [updateLine, {loading, error }] = useMutation(UPDATE_ITEM_MUTATION, {
  variables:{ ...lines}
  });

  useEffect(() => {
    updateLine
  },[lines]);

  const updateMyData = (rowIndex, columnID, value) => {
    setLines(getLines =>
      getLines.map((row, index) => {
        if (index === rowIndex) {
          console.log(row)
          return {
            ...lines[rowIndex],
            [columnID]: value
          };
        }
        return row;

      })
    );
  };

还有突变……

const UPDATE_ITEM_MUTATION = gql`
mutation UPDATE_LINE_MUTATION( …

我定义了以下 gQL，

import gql from 'graphql-tag'

const SIGN_UP_QUERY = gql`
  query {
    signUpForm @client {
      firstName
      email
      password
    }
  }
`

我将它与 react-apollo 查询一起使用

<Query query={SIGN_UP_QUERY}>
    {({
      data: {
        signUpForm: { firstName }
      },
      loading
    }) => { ...... }}
</Query>

有了这个我得到一个错误 Cannot read property 'firstName' of undefined

我在这里做错了什么？

我需要重新获取 Apollo 查询才能触发 useEffect。我正在实现一个按日期段和文本搜索进行过滤的过滤栏。我的搜索提交按钮触发查询的重新获取，返回的数据是我的 useEffect 的依赖项。返回数据时，如果搜索字段已填充，则应运行过滤器。这在我第一次运行搜索时有效，但是当我使用重置功能重置时，重置被触发，查询在 Chrome 中获得 200 并在 Chrome 开发工具中显示数据，但未触发 useEffect。为什么是这样？

//React
import React, {useState, useContext, useEffect, Fragment } from 'react'

//extra React libraries

//external libraries
import { useQuery, useMutation } from '@apollo/react-hooks'

//components
import AccountsGrid from '../../containers/AccountsGrid/AccountsGrid'
import SpinnerLoader from '../../components/SpinnerLoader/SpinnerLoader'

//styles
import styles from "./accounts.module.scss";

//contexts
import UserContext from '../../containers/contexts/UserContext/UserContext'
import AccountContext from '../../containers/contexts/AccountContext/AccountContext'

//constants
import { 
  GET_PARENT_ACCOUNT, 
  SET_ACCOUNTS,
  SET_IS_ACTIVE,
  SET_ACCOUNTS_LIMIT,
  SET_ACCOUNTS_OFFSET,
  SET_ACCOUNTS_TOTAL,
  SET_ACCOUNTS_START_DATE,
  SET_ACCOUNTS_END_DATE,
} from '../../containers/contexts/AccountContext/accountActionTypes'

import { 
  GET_ACCOUNT_USERS,
  GET_ACCOUNTS,
  TOTAL_ACCOUNTS,
  } from '../../utils/constants/queries/accountQueries' …