從 React 中檢索 state 數據

Question

我有一個輸入表單和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>
    </>
  );
}

Answer 1

嘗試將fetchPolicy: .network-only'選項與useQuery掛鈎一起傳遞，以強制從數據庫而不是 apollo 緩存中獲取。

從文檔：

默認情況下，您的組件將首先嘗試從緩存中讀取，如果您查詢的完整數據在緩存中，那么 Apollo 只會從緩存中返回數據。