Skip to content

Optionally generate query keys factory for the useQueries #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 23, 2022

Conversation

adairrr
Copy link
Contributor

@adairrr adairrr commented Aug 22, 2022

This PR allows the user to specify queryKeys option for the react-query generation so that the following (truncated) will be generated:

export const cw3FlexMultisigQueryKeys = {
  contract: [
    {
      contract: 'cw3FlexMultisig',
    },
  ] as const,
  address: (contractAddress: string) =>
    [{ ...cw3FlexMultisigQueryKeys.contract[0], address: contractAddress }] as const,
...
  proposal: (contractAddress: string, args?: Record<string, unknown>) =>
    [
      { ...cw3FlexMultisigQueryKeys.address(contractAddress)[0], method: 'proposal', args },
    ] as const,
// we use the underscore method here on purpose for clarity
  listProposals: (contractAddress: string, args?: Record<string, unknown>) =>
    [
      { ...cw3FlexMultisigQueryKeys.address(contractAddress)[0], method: 'list_proposals', args },
    ] as const,
...
}
export function useCw3FlexMultisigProposalQuery({
  client,
  args,
  options,
}: Cw3FlexMultisigProposalQuery) {
  return useQuery<ProposalResponse, Error, ProposalResponse>(
-     ['cw3FlexMultisigListVoters', client?.contractAddress, JSON.stringify(args)],
+    cw3FlexMultisigQueryKeys.proposal(client.contractAddress, args),
    () =>
      client
        ? client.proposal({
            proposalId: args.proposalId,
          })
        : Promise.reject(new Error('Invalid client')),
    { ...options, enabled: !!client && (options?.enabled != undefined ? options.enabled : true) }
  )
}

Please see https://tkdodo.eu/blog/effective-react-query-keys

This allows the following:

// remove everything related to any of these contracts
queryClient.removeQueries([{ contract: 'cw3FlexMultisig' }])
queryClient.removeQueries(cw3FlexMultisigQueryKeys.contract)

// reset all the queries for this specific contract address
queryClient.resetQueries([{ contract: 'cw3FlexMultisig', address: 'juno1ua2ak7ucrjc5vfzlzeyaw9shrpr2srqggquanqmztfv2fzqvyfhsu2pnzj' }])
queryClient.resetQueries(cw3FlexMultisigQueryKeys.address('juno...u2pnzj'))

// invalidate all queries for this specific query method
queryClient.invalidateQueries([{ contract: 'cw3FlexMultisig' , address: 'juno1ua2...hsu2pnzj', method: 'list_voters'
}}])
queryClient.invalidateQueries(cw3FlexMultisigQueryKeys.listVoters('juno1....u2pnzj'))

(https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientsetquerydata)
AND allows for use of setting query data if fetched outside of react query, so that fewer network calls have to be duplicated:

queryClient.setQueryData(cw3FlexMultisigQueryKeys.listVoters('juno1....u2pnzj'), [{ addr: 'juno...xx', weight: 1}])

Note that it is updated for the optionalClient to accept an undefined contract address :2

Also note that it removes the strongly typed (string | undefined)[]) and leaves it to inference.`

@adairrr adairrr changed the title Optionally generate query keys for the useQueries Optionally generate query keys factory for the useQueries Aug 22, 2022
@pyramation pyramation merged commit 50dd957 into hyperweb-io:main Aug 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants