Update write hooks that apply to a project to accept the ID as a mutation param

Currently, there are some write hooks that accept a project ID as a param to the hook, which then return a mutation object that can be used to do a write to associated project. However, this creates an implicit (and unnecessary) constraint on where these hooks can be used, as it means that hook can only be used where the project ID is accessible from the component render body. For example, the useSendInvite() API usage currently looks like this:

function App() {
  // This comes from somewhere e.g. navigation params, local storage, etc
  const projectId = 'a'
  const sendInvite = useSendInvite({ projectId })

  // send invite for project with ID 'a'
  function onClick() {
    sendInvite.mutate({ ... })
  }
  
}

This becomes awkward to use when the project ID comes from something that isn't necessarily available in the component render body, such as an event listener or function props. While you may not do what's shown in the following examples, hopefully the fundamental limitation is evident:

function EventExample() {
  useEffect(() => {
    someFakeApi.addEventListener('some-event', (projectId) => {
      // There's no way to use the write hook using the project ID coming from here
      // Instead, a component boundary - and maybe some extra state management - has to be introduced
      navigate('InviteScreen', { projectId })
    })
  }, [])
}

function FunctionExample() {
  const createProject = useCreateProject()

  function onClick() {
    createProject.mutate().then(projectId => {
      // Cannot make use of useSendInvite() here, must access a component boundary in order to do so e.g. navigate to a different screen
      navigate('InviteScreen', { projectId })
    })
  }
}

// New component introduced in order to access `useSendInvite()` write hook
function InviteScreen({ projectId }) {
  const sendInvite = useSendInvite({ projectId })

  function onClick() {
    sendInvite.mutate({ ... })
  }
}

The ideal scenario would be to update the implementations of the relevant write hooks so that the project ID is a parameter of the mutation, not the hook. For example, the above examples could look like this:

function EventExample() {
  const sendInvite = useSendInvite()

  useEffect(() => {
    someFakeApi.addEventListener('some-event', (projectId) => {
      // Now you can use the write hook here!
      sendInvite.mutate({ projectId, ... })
    })
  }, [sendInvite])
}

function FunctionExample() {
  const createProject = useCreateProject()

  function onClick() {
    createProject.mutate().then(projectId => {      
      // Now you can use the write hook here!
      sendInvite.mutate({ projectId, ... })
    })
  }
}

function InviteScreen({ projectId }) {
  const sendInvite = useSendInvite()

  function onClick() {
    // You can still use the hook in the component-defined boundaries as before, just update the provided arguments!
    sendInvite.mutate({ projectId, ... })
  }
}

This would constitute a breaking change and most likely apply to the following write hooks at the time of writing:

• useSendInvite()
• useRequestCancelInvite()
• useAddServerPeer()
• useRemoveServerPeer()
• useImportProjectCategories()
• useImportProjectConfig()
• useUpdateProjectSettings()
• useChangeMemberRole()
• useRemoveMember()
• useCreateBlob()
• useStartSync()
• useStopSync()
• useConnectSyncServers()
• useDisconnectSyncServers()
• useSetAutostopDataSyncTimeout()
• useExportGeoJSON()
• useExportZipFile()

Start by locating the listed write hooks, beginning with useSendInvite(), and compare how each currently receives the project ID with how its mutation is called. Update the relevant hooks consistently so the project ID is supplied to mutate, then verify that the documented event, function, and component usage patterns work across all listed hooks.