从React检索状态数据

如何解决从React检索状态数据

我有一个输入表单和onSubmit，输入值将呈现为Checkbox。数据存储在MongoDB中-我可以看到使用Robo 3T键入的输入数据，因此我知道该部分正在工作。但是，该数组在控制台中为空，没有被添加到Checkbox中。

export const QUERY_ALL_CHORES = gql`
  query chores {
    chores {
      _id
      choreBody
    }
  }
`;

resolvers.js
addChore: async (parent,args,context) => {
      // return console.log("chores: ",args.choreBody);

      if (context.user) {
        const chore = await Chore.create({
          ...args,choreBody: args.choreBody,});

        await User.findByIdAndUpdate(
          { _id: context.user._id },{ $push: { chores: chore._id } },{ new: true }
        );
        return chore;
      }
    },

然后这是我的AddChoreForm.js

export default function AddChore(props) {
  const [choreBody,setBody] = useState("");
  const [addChore] = useMutation(ADD_CHORE,{
    update(cache,{ data: { addChore } }) {
      try {
        const { chores } = cache.readQuery({ query: QUERY_ALL_CHORES });
        cache.writeQuery({
          query: QUERY_ALL_CHORES,data: { chores: [addChore,...chores] },});
      } catch (e) {
        console.log(e);
      }

      // append new chore to the end of the array
      const { me } = cache.readQuery({ query: QUERY_ME });
      cache.writeQuery({
        query: QUERY_ME,data: { me: { ...me,chores: [...me.chores,addChore] } },});
    },});

  const handleFormSubmit = async (event) => {
    event.preventDefault();

    try {
      // add chore to database
      await addChore({
        variables: { choreBody },});

      // clear form value
      setBody("");
    } catch (e) {
      console.log(e);
    }
  };

return (
    <Container>
            <Form onSubmit={handleFormSubmit}>
              <Form.TextArea
                onChange={(event) => setBody(event.target.value)}
              />
              <Button>
                Add Chore
              </Button>
            </Form>
    </Container>
  );
}

然后将输入数据放在这里的Checkbox中，但是当我检查控制台时，该数组为空。

export default function ChoreList({ chores }) {
     // get chore data
  const { choreData } = useQuery(QUERY_ALL_CHORES);
  const chores = choreData?.chores || [];
  console.log("Chores: ",chores);    

  return (
    <>
      <Container chores={chores} >
        {chores &&
          chores.map((chore) => (
            <div key={chore._id}>
              <Form>
                <Form.Field>
                  <List>
                    <List.Item>
                      <List.Content>
                        {/* {chore.choreBody} */}
                        <Checkbox label={chore.choreBody} />
                      </List.Content>
                    </List.Item>
                  </List>
                </Form.Field>
              </Form>
            </div>
          ))}
      </Container>
    </>
  );
}

解决方法

尝试通过fetchPolicy: 'network-only'钩子传递useQuery选项，以强制从数据库而不是阿波罗缓存中提取数据。

来自docs：

默认情况下，您的组件将首先尝试从缓存中读取数据，如果查询的全部数据都在缓存中，那么Apollo只会从缓存中返回数据。