javascript - Pertanyaan dan stor data klien Apollo apabila disambungkan kepada pelbagai komponen

Saya mempunyai 3 komponen berbeza yang menggunakan pertanyaan GraphQL yang sama. Contoh ini adalah pertanyaan GET_USERS. Ini digunakan ketika mencari pengguna untuk dihantar mesej dalam tab pemesejan masing-masing dan juga ketika menjemput pengguna untuk tindakan serta menandai mereka semasa membuat pos.

Masalah yang saya hadapi dan sedang cuba untuk mencari cara menanganinya ialah ia tidak selalu berlaku bahawa hanya satu yang dirender pada satu masa. Seorang pengguna mungkin klik tab mesej dan kemudian pergi untuk menandakan pengguna di tab pos. Masalah: apabila dia kembali ke tab mesej, ia kini telah dirender semula dengan keadaan pertanyaan yang dipanggil dari penandaan.

Ada cadangan tentang cara untuk menetapkan state dengan Apollo dan pertanyaan secara umum untuk mengelakkan isu ini. Akhirnya, backend saya adalah satu 'route' atau fungsi resolve untuk tindakan tertentu itu.

EDIT Untuk maklumat lanjut. Cara saya tahu saya boleh menyelesaikannya adalah dengan menggunakan permintaan axios ke titik akhir graphql dan menyimpan respons dalam useState tempatan untuk komponen itu. Jika saya melakukan ini untuk setiap tempat yang berbeza dalam aplikasi yang menggunakan maklumat itu, mereka akan kekal terpisah dan tidak berkongsi keadaan yang sama secara tepat.

Tetapi untuk lebih jelas, saya cuba menyelesaikan ini sambil menggunakan Apollo jika boleh.

Jawapan #1

Anda boleh menggunakan gabungan state tempatan (useState) dan useLazyQuery. Dari apa yang saya faham, anda mempunyai beberapa komponen (atau skrin, tab, apa sahaja) yang dipasang pada masa yang sama, katakan ScreenA dan ScreenB. Dalam setiap satu daripada mereka anda membuat pertanyaan GET_USERS, tetapi apabila keputusan pertanyaan anda dikemas kini dalam ScreenB, anda tidak mahu keputusan itu juga dikemas kini dalam ScreenA.

Dengan useLazyQuery ini boleh kelihatan seperti ini:

1. Buat hook tersuai untuk kegunaan semula yang mudah di seluruh komponen

export const useLazyGetUsers = () => {
  const [users, setUsers] = useState()

  const [queryGetUsers] = useLazyQuery(GET_USERS, {
    onCompleted: (data) => setUsers(data.users),
    onError: (error) => console.log('onError', { error }), // handle errors as you wish
    fetchPolicy: "cache-and-network", // or whatever you want
  })

  return {queryGetUsers, users}
}

2. Di ScreenA, gunakan hook dan ambil kueri:

const ScreenA = () => {
  const {queryGetUsers, users} = useLazyGetUsers()
  
  return (
    <TouchableOpacity onPress={() => queryGetUsers()}>
      <Text>Get users</Text>
    </TouchableOpacity>
  )
}

3. Di ScreenB, juga gunakan hook itu.

Perhatikan bahawa anda boleh memanggil queryGetUsers bila-bila masa anda mahu, semasa pemasangan, semasa menekan TouchableOpacity, atau bila-bila masa.

const ScreenB = () => {
  const {queryGetUsers, users} = useLazyGetUsers()
  
  useEffect(() => {
    queryGetUsers()
  }, [])

  return (
    ...
  )
}

4. Gunakan users mengikut kehendak anda. Jika anda memanggil queryGetUsers di ScreenA, ia tidak akan mengemas kini nilai users di ScreenB.

Ini bukan penyelesaian 100% Apollo tetapi ia menggunakan keadaan tempatan dengan minima dan hook menjadikannya sangat mudah untuk digunakan semula. Saya berharap ini menyelesaikan masalah anda!

Anda boleh membaca lebih lanjut tentang useLazyQuery di sini:

• https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually
• https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery